刪除HTML元素的所有子元素的更有效方法是什麼？

我知道訪問和操作DOM可能非常昂貴，所以我想盡可能有效地做到這一點。我的情況是，某個div總是包含一個項目列表，但有時候我想用一組完全不同的項目來刷新該列表。在這種情況下，我可以創建新列表並將其附加到該div，但我也需要清除列表。最好的方法是什麼？將innerHTML設置爲空字符串？迭代子節點並調用「removeChild」？還有別的嗎？刪除HTML元素的所有子元素的更有效方法是什麼？

來源

2009-02-06 Bialecki

對QuirksMode看看。這可能需要一些挖掘，但是在不同的瀏覽器中只需要這些操作。雖然測試是在一年多前完成的，但在大多數瀏覽器中，設置爲innerHTML到""是最快的。

P.S. here是該頁面。

來源

2009-02-06 06:02:17 staticsan

將innerHTML設置爲空字符串。

來源

2009-02-06 06:00:43

強調可能是昂貴。它並不總是昂貴的;事實上，在處理少量元素時，它可能是微不足道的。記住，優化應該總是最後完成，並且只有在你有明確的證據證明你想要改進的特定方面真的是你的性能瓶頸之後。

如果可能，我建議避免使用innerHTML;很容易搞砸了，並且爲DOM做了一些令人討厭的事，你無法從優雅中恢復過來。

這種方法是病例的99.9％相當快的，除非你是從DOM移除大規模層次大塊：

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

來源

2009-02-06 06:01:08

我會認爲最簡單的方法搞砸和做一些令人討厭的DOM將編寫的代碼來操縱它。我看不出如何改變innerHTML會做什麼壞事，特別是如果DOM對應用程序沒有任何興趣。 – 2009-02-06 06:31:16

我建議在你關心的瀏覽器上測試幾個實現。不同的JavaScript引擎具有不同的性能特徵，不同的DOM操作方法在不同引擎上具有不同的性能。謹防過早優化並提防瀏覽器的差異。

來源

2009-02-06 15:17:11

刪除HTML元素的所有子元素的更有效方法是什麼？

回答

相關問題