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

最佳答案

如果获得主体的innerHTML值,则向其中添加一个字符串,然后将其放回主体,主体中的所有元素都是从HTML字符串重新创建的。变量中的内容是对页面中不再存在的元素的引用。

关于javascript - innerHTML的副作用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2026732/

10-09 15:07
查看更多