JavaScript刪除DOM元素的所有子節點

這裡有一個有趣的問題：JavaScript如何移除一個DOM元素(element)的所有子節點(node)？

假設我們有一個DOM元素（例如， div 或 span ），元素名是 elm ， 移除所有子節點，最簡單而且直覺的方式如下：

elm.innerHTML = '';

這看起來很完美，而且應該不會有任何問題。事實上， 我一開始使用這個方法來刪除所有子節點，而且也運作得沒問題。但有一次， 我又在程式碼裡使用這個方法，在最新版的Chrome，Firefix和Opera沒問題， 但在IE8卻沒辦法運作。IE8在下面這個程式碼片段出了出來：

elm.innerHTML = '';
elm.appendChild(childs);

我不知道為何上面的代碼在IE8不能運作， 所以我搜尋了一下並找到了更好的方式來移除所有子節點 [1] [2]。 正統而且無臭蟲的方式如下：

while (elm.hasChildNodes()) {
  elm.removeChild(elm.lastChild);
}

也許對某些人而言正統的方式是顯而易見的， 但這花了我一些時間去找臭蟲並領悟到有時簡單的方法不一定能用。 所以我寫了這篇博文來幫那些跟我有同樣問題的人。

附錄

JavaScript把陣列(array)清空的其中一個方法是： [5]

while(A.length > 0) {
  A.pop();
}

就如所見，這裡 清空陣列 的作法跟 移除所有子節點 是一樣的。 這蠻有趣的所以我把此放在附錄。

References: