0

据我所知，该问题与此处描述的问题相似。但是，我没有使用 mootools，我的问题和结果不同。这是一个演示该问题的测试页面：http: //jsfiddle.net/S7rtU/2/。

createElement我使用and将元素添加到容器中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。除了 IE 6 和 7 之外的所有浏览器实际上都会恢复这些元素。所以它们成功地存储在内存中并且引用没有被破坏。此外，注册到这些元素的事件处理程序仍然有效。

在 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);
    }
}

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

我将不胜感激任何评论。

4

1 回答 1

0

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

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

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

这应该可以避免您的 innerHTML 问题，并且代码比您的版本少一点。您也可以element用其自身的浅克隆替换，但这可能会导致其他问题。

于 2013-01-15T02:03:52.463 回答