当修改innerHTML时，为什么看起来好像在调试器控制台中替换了该元素？

Question

使用以下代码，在Google Chrome浏览器的开发工具中，它似乎好像root2每秒都在变化，但是root2应该保持不变。如果说，是root2的内容在变化，那么root1的内容也在更新，但不是每秒闪烁一次。为什么会这样？

setInterval(function() {

  document.getElementById('root2').innerHTML = ("<h1>Hello, world!</h1><h2>" +
    new Date().toLocaleTimeString() + "</h2>");

}, 1000);

<div id="root1">
  <div id="root2"></div>
</div>

[root2每秒闪烁：

Answer 1

因为是。

使用innerHtml分配实际上会丢弃“此节点中的所有内容”，并根据您使用的HTML字符串引导new子节点。这些新节点可能使用与以前完全相同的属性，但它们仍然是全新的节点。

但是，当使用innerHTML时，您仅更改节点子内容。不是节点本身。因此，这就是root1没有显示任何更改的原因：没有一个子项被删除/添加。 root2节点确实更改了其子内容，因此将发出信号更改。

如果要保留节点并仅对其进行更新，请不要使用innerHTML。实际上，除非您知道自己在做什么，否则根本不会使用innerHTML。它几乎从来不是您要解决/实现的任何问题或事物的解决方案。 在这种特定情况下，您似乎只是想基于“反映了更新的DOM状态的新组成的字符串”来更新活动DOM，请看morphDOM之类的内容。

Answer 2

因为它们确实突出显示了已删除的任何节点的父节点：