javascript删除创建多个子节点

  1. 云栖社区>
  2. 博客>
  3. 正文

javascript删除创建多个子节点

accompanymin 2018-05-23 16:38:50 浏览1102
展开阅读全文

问题:对已经有的HTML结构(如下图),按照字符串顺序重新排序DOM结点。

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>


第一步获得所有子节点

var testList=document.getElementById('test-list');
var childs=testList.childNodes;


第二步将每个子节点的值一个个保存在数组中,然后一个个将子节点删除

    var arr=[];
    for(var i=0;i<childs.length;i++){
        arr[i]=childs[i].innerHTML;
        testList.removeChild(childs[i]);
    }
可是并没有删除掉

bfc0ae4a45759335ed3ff7690be4b3f649f4b5e3

原因是:因为当你把索引为0的子节点删除后,那么的原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点。

解决方法:从后面往前删除

    var arr=[];
    for(var i=childs.length-1;i>=0;i--){
        arr[i]=childs[i].innerHTML;
        testList.removeChild(childs[i]);
    }
运行成功


第三步将arr排序

arr.sort();


第四步创建新子节点,并依次把arr的值赋值给它

for(var i=0;i<arr.length;i++)
    {
        var li=document.createElement('li')
        li.innerHTML=arr[i];
        testList.appendChild(li);
    }
可是并没有创建好(页面没有任何显示),打开控制台有11个undefined

4db492f83bb99a14215205d3385ec44d2ed1f926

我们先看看刚开始给arr赋值的时候,arr具体的到那些值,按道理就是五个值Haskell,Ruby,Python,JavaScript,Scheme

    var arr=[];
    for(var i=childs.length-1;i>=0;i--){
        arr[i]=childs[i].innerHTML;
        console.log(arr[i]);
        testList.removeChild(childs[i]);
    }
查看控制台结果

5b8f826ddca35f82637dbf5e1963a66cf8a76005

竟然多了一半的undefined


解决方法:第二步应该改为

    var arr=[];
    for(var i=childs.length-1;i>=0;i--){
        if(i%2!==0) {
            arr.push(childs[i].innerHTML);
        }
        testList.removeChild(childs[i]);
    }
思路是arr里面的值不随i控制用push()函数

现在再看看arr的值:

    arr.sort();
    for(var i=0;i<arr.length;i++)
    {
        console.log(arr[i]);
    }
0466b4973f02344348769f214272a63f55fa55ac

最后加上第四步代码,所有问题解决


注:这篇文章题目来源于廖雪峰软件工程师的Javascript教程里的插入DOM一节:

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014359940861047248456754f44e55919fe9370c723ae6000









网友评论

登录后评论
0/500
评论
accompanymin
+ 关注