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

    
    
     
Scheme
    
     
JavaScript
    
     
Python
    
     
Ruby
    
     
Haskell
    

第一步获得所有子节点

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

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

var arr=[];    for(var i=0;i

可是并没有删除掉

原因是：因为当你把索引为0的子节点删除后,那么的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为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

可是并没有创建好（页面没有任何显示），打开控制台有11个undefined

我们先看看刚开始给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]);    }

查看控制台结果

竟然多了一半的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

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

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