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

我知道访问和操作DOM的成本非常高，所以我希望尽可能高效地完成这项工作。我的情况是，某个div总是包含一个项目列表，但是有时我想用一组完全不同的项目刷新该列表。在本例中，我可以构建新列表并将其附加到该div，但我还需要清除out列表。最好的办法是什么？是否将innerHTML设置为空字符串？迭代子节点并调用“removeChild”？还有什么吗？

将innerHTML设置为空字符串。

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

我建议尽可能避免使用innerHTML；很容易搞砸，对DOM做一些不好的事情，而这些事情是您无法优雅地恢复过来的

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

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

看一看。这可能需要一些挖掘，但在各种浏览器中都会出现这种操作。尽管这些测试是在一年多前完成的，但在大多数浏览器中，将

innerHTML

设置为

“

是最快的

---

附页。

我建议在您关心的浏览器上测试几个实现。不同的Javascript引擎具有不同的性能特征，不同的DOM操作方法在不同的引擎上具有不同的性能。当心过早的优化，当心浏览器之间的差异。

我认为最容易搞乱DOM并对其进行恶意操作的方法是编写操作它的代码。我看不出更改innerHTML会带来什么麻烦，特别是当应用程序对DOM不感兴趣时；