什么是删除HTML元素所有子元素的更高效方法？

Question

我知道访问和操作DOM可能非常耗费时间，因此我希望尽可能高效地完成这项任务。我的情况是某个div始终包含一个项目列表，但有时我想用完全不同的项目列表来刷新该列表。在这种情况下，我可以构建新列表并将其附加到该div，但我还需要清除旧列表。什么是最好的方法？将innerHTML设置为空字符串？迭代子节点并调用“removeChild”？还是其他方法？

- Bialecki

---

这个回答解决了你的问题吗？如何在JavaScript中删除DOM节点的所有子元素。 - Inigo

Answer 1

请查看QuirksMode。虽然需要一些挖掘，但在各种浏览器中有时需要这样做。尽管测试是一年前进行的，但在大多数浏览器中，将innerHTML设置为""是最快的方法。

P.S. 这里是页面。

- staticsan

Answer 2

将 innerHTML 设置为空字符串。

- Scott Evernden

Answer 3

我建议在你关心的浏览器上测试几个实现。不同的JavaScript引擎具有不同的性能特征，不同的DOM操作方法在不同的引擎上也有不同的性能表现。要注意避免过早优化，并注意浏览器之间的差异。

- Mr. Shiny and New

Answer 4

强调可能会很昂贵。实际上，当处理少量元素时，它可能是微不足道的。请记住，优化应该始终在最后进行，并且仅在您具有可证明的证据表明您想要改进的特定方面确实是您的性能瓶颈之后才进行。

如果可能的话，我建议避免搞乱innerHTML；这很容易出错，并对DOM做一些难以优雅地恢复的事情。

对于99.9％的情况，此方法非常快，除非您从DOM中删除大量层次结构块：

while(ele.childNodes.length > 0) {
    ele.removeChild(ele.childNodes[ele.childNodes.length - 1])
}

- Rex M

---

我认为最容易搞砸并对DOM做出不良影响的方法是编写操作它的代码。如果DOM对应用程序没有任何意义，那么我无法理解更改innerHTML会产生任何不良影响。 - Scott Evernden

为什么不直接使用以下代码：while(elem.childNodes) elem.removeChild(firstChild); - James