Question

我在使用DOM元素引用时遇到了一些问题，我认为我已将其跟踪到与更新innerHTML有关。

在此示例中，在第一个警报处，两个变量按预期引用相同的元素。但更奇怪的是，在更新了父元素（body）的innerHTML之后，两个变量被认为是不同的，尽管它们都没有触及。

<html>
<head>
  <script type="text/javascript">

  var load = function () {
    var div1 = document.createElement('div');
    div1.innerHTML = 'div1';
    div1.id = 'div1';

    document.body.appendChild(div1);
    alert(div1 === document.getElementById('div1')); // true

    document.body.innerHTML += '<div>div2</div>';
    alert(div1 === document.getElementById('div1')); // false
  };

  </script>
</head>

<body onload="load();">
</body>

</html>

使用==而不是===产生相同的结果。我在Firefox 3.5和IE6中得到了相同的结果。是什么导致第二次警报评估为假？

Answer 1

当您获得正文的innerHTML值时，向其添加一个字符串并将其放回正文中，将从HTML字符串中重新创建正文中的所有元素。变量中的内容是对页面中不再存在的元素的引用。

Answer 2

这是因为......

document.body.innerHTML += '<div>div2</div>';

...不是真正的“追加”......它是完全替代品。当然，替换等于旧内容+新内容，事实是它是一个新的字符串，它构建了新的DOM元素。

innerHTML的副作用？

2 个答案: