Javascript 设置innerHTML属性会断开对子元素的引用

据我所知，这个问题与所描述的类似。然而，我没有使用mootools，我的问题和结果是不同的。 这是演示问题的测试页面：

我使用

createElement

和

appendChild

将元素添加到容器中。在添加每个元素时，我还将对它的引用存储在专用数组（

elems

）中

然后，我决定清除容器，并通过设置

container.innerHTML=''

来实现

（在我的示例中，我首先将其设置为挂起消息，然后在3秒钟后，使用

setTimeout

清除它。这是为了给时间观察DOM的更改。）

然后，我尝试从

elems

数组中重新填充容器，为每个存储的元素调用

container.appendChild

我已经在手边的浏览器上进行了测试：Firefox 17.0.1、Chrome 23.0.1271.97、Safari 3.1.2、IE 6和IE 7。除IE6和IE7之外的所有组件实际上都将恢复这些元素。因此，它们成功地存储在内存中，引用不会被破坏。此外，注册到这些元素的事件处理程序仍然有效

在IE中，元素不会重新出现

我所读到的关于这个问题的内容，包括另一个SO问题，似乎表明当您在容器上修改

innerHTML

时，引用应该被破坏。事件处理程序也应该被破坏。然而，我测试的3款现代浏览器既没有破坏引用，也没有破坏事件处理程序

当然，要在IE中实现这一点，我可以使用类似的东西，但如果有很多元素，这是一个重要的额外处理：

function explicitClearContainer() {
    var e;
    // Explicitly remove all elements
    for (var i = 0; i < elems.length; ++i) {
        e = elems[i];
        // Update the reference to the removed Node
        elems[i] = e.parentNode.removeChild(e);
    }
}

function explicitClearContainer（）{
变量e；
//显式删除所有元素
对于（变量i=0；i

我的问题是，人们对这种行为了解多少，在不同的环境中可以预期到什么，使用这种技术的陷阱是什么

---

如果您有任何意见，我将不胜感激。

innerHTML属性在HTML5中只是“标准化”的，它实际上只是记录了许多功能的常见浏览器行为。像innerHTML这样的东西在不同的浏览器中实现的方式不同，并且在一段时间内会继续不同，所以最好避免在出现问题时使用它

还有其他方法可以清除元素的子节点，例如：

function removeContent(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
}

---

这应该可以避免innerHTML的问题，并且代码比您的版本少一点。您也可以将

元素

替换为自身的浅克隆，但这可能会导致其他问题。

我希望是1。您将不再使用innerHTML，除了插入任意（源代码被认为是安全的）html和2。不使用IE；）@metadings OP的编码可能不仅仅是为了他/她自己使用，而是为了一个可能会被很多人访问的网站，其中一些人可能正在使用IE 6或7（可能是5%左右）。谢谢你的回答-避免使用innerHTML绝对是一种跨浏览器的方式。