道非道 非常道

勤思、谨言、慎行、厚积、薄发

统计

web

天圆

经济 政治 军事

键康

[ 转 ] removeChild的障眼法.

 

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




posted on 2009-11-16 16:49 星期五 阅读(362) 评论(0)  编辑  收藏 所属分类: web 2.0


只有注册用户登录后才能发表评论。


网站导航: