removeChild的障眼法
js 数组 动态更新非静态列表
有这么一段代码:
<ul id="demo">
<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]);
}
运行代码后 ,发现只剩下 节点b 了。
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
ul.removeChild(liList[0]);
}
运行上面代码后,发现只剩下 节点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个例子的对比,相信你已经发现其中的问题。
当然例子没什么实际意义,但可以看出removeChild 删除元素后,对html的即时影响。
做项目使用时,需要注意下。
或者可以用以下代码实现:
var ul = document.getElementById('demo');
while (ul.lastChild){
ul.removeChild(ul.lastChild);
}
看这种方式是不是更好
while(liList.length){
ul.removeChild(liList[liList.length-1])
}
form:http://www.cssrain.cn/article.asp?id=1413