[ 轉 ] removeChild的障眼法.
removeChild的障眼法
js 數(shù)組 動態(tài)更新非靜態(tài)列表
有這么一段代碼:
<ul id="demo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
JavaScript:
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < = liList.length; i++) {
ul.removeChild(liList[i]);
}
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < = liList.length; i++) {
ul.removeChild(liList[i]);
}
運行代碼后 ,發(fā)現(xiàn)只剩下 節(jié)點b 了。
運行上面代碼后,發(fā)現(xiàn)只剩下 節(jié)點c 了。
最后把length 提取出來, 先定義,緩存起來。
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
var lilength = liList.length;
for (var i = 0; i < lilength; i++) {
ul.removeChild(liList[0]);
}
運行代碼,才真正3個li都被刪除。
通過這3個例子的對比,相信你已經(jīng)發(fā)現(xiàn)其中的問題。
當然例子沒什么實際意義,但可以看出removeChild 刪除元素后,對html的即時影響。
做項目使用時,需要注意下。
或者可以用以下代碼實現(xiàn):
var ul = document.getElementById('demo');
while (ul.lastChild){
ul.removeChild(ul.lastChild);
}
while (ul.lastChild){
ul.removeChild(ul.lastChild);
}
看這種方式是不是更好
while(liList.length){
ul.removeChild(liList[liList.length-1])
}
ul.removeChild(liList[liList.length-1])
}
form:http://www.cssrain.cn/article.asp?id=1413
posted on 2009-11-16 16:49 星期五 閱讀(377) 評論(0) 編輯 收藏 所屬分類: web 2.0