2

我在 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 中得到了相同的结果。知道是什么导致第二个警报评估为假吗？

4

2 回答 2

3

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

于 2010-01-08T10:01:06.243 回答
1

这是因为 ...

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

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

于 2010-01-08T10:02:13.260 回答