Javascript刪除節點的全部內容

javascript刪除節點的全部內容

最近做項目，需要實現一個基本的小功能，就是向一個DIV中插入一些html的內容(使用Ext 的template),因爲每次向DIV中插入的內容可能會不一樣所以需要再插入之前現將此DIV中的內容清空，於是開始的時候寫了如下代碼:

var


 n = document.getElementById(
'divName'

).childNodes.length;
for


 ( 
var


 i = 0; i < n; i++) {
    document.getElementById(
'divName'

).removeChild(
    document.getElementById(
'divName'

).childNodes[i]);
}

var n = document.getElementById('divName').childNodes.length;
for ( var i = 0; i < n; i++) {
	document.getElementById('divName').removeChild(
	document.getElementById('divName').childNodes[i]);
}

 

很簡單的思路，就是一個一個刪除吧，可是運行時候就會發現問題，因爲在使用removeChild的時候，DIV的child的數量已經減去1了，也就是說假如說有3個孩子，對應爲childNodes[0],childNodes[1],childNodes[2]。當執行完第一次將childNodes[0]刪除後，i變爲1，但此時原來剩下的childNodes[1],childNodes[2]已經變成了childNodes[0],和childNodes[1]...以此類推，就會發現這種方式是不可取的，原因就在於DIV的孩子數會隨刪除而減少。所以改了一下做法，實現了這個簡單的小功能。

Js代碼   

var


 n = document.getElementById(
'divName'

).childNodes.length;
for


 ( 
var


 i = 0; i < n; i++) {
    document.getElementById(
'divName'

).removeChild(
    document.getElementById(
'divName'

).firstChild);
}

摘自：http://prothiphoebe.iteye.com/blog/374135