刪除div節點的子節點

我有以下代碼來刪除div節點的子節點。這兩個代碼是否正確？刪除div節點的子節點

while(innerWindowContentBox.hasChildNodes())  
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]);

其他是

innerWindowContentBox.innerHTML = '';

注意，代碼是Greasemonkey的腳本，所以不需要IE瀏覽器的支持。

2012-02-27 Wingroeow

所以，是的。這兩個代碼片段都應該可以工作。第二個是骯髒（也許更快）的方式。 :-) – 2012-02-27 07:23:33

髒兮兮的。第二個可以一目瞭然地被理解和驗證。 :) – Deestan 2012-02-27 08:28:56

這兩者應該做大致相同的事情，只要用戶去，只要你的應用程序的行爲。

但值得一提的是，如果您將添加到網頁中的元素，您應該使用前一種方法。當您使用innerHTML時，JS引擎可能並不總是意識到DOM更改，並且您可能會遇到一些奇怪或意外的行爲。

2012-02-27 07:23:33 jmort253

兩位代碼都會完成工作，但使用DOM方法（即while(innerWindowContentBox.hasChildNodes() ...）。

優點：

這是相當快一點。 見this speed comparison at jsperf.com。在示例HTML（數百個節點，每個節點都有事件處理程序）上，DOM方法的速度提高了10到20倍（到目前爲止）。
它避免了壞習慣。想知道innerHTML會導致意外的錯誤，特別是在需要廣泛瀏覽器支持的代碼上。至少，它會銷燬您可能想要保留的事件處理程序。對於這種特殊情況，這不是一個問題，但如果你習慣於操縱innerHTML，它會在某些時候咬你。
DOM方法可以通過手術改變你需要的位，因爲innerHTML會破壞所有子節點，因此必須讓瀏覽器重新構建任何你希望保留的節點。

2012-02-27 09:52:07

向@Brock Adams發佈的jsPerf benchmark添加了另一個測試用例。這是稍快（至少在鉻）使用element.firstChild測試：

while (containerNode.firstChild) { 
    containerNode.removeChild (containerNode.childNodes[0]); 
}

2012-02-27 22:26:19 slashnick

回答