javascript删除创建多个子节点

问题：对已经有的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]);
    }

可是并没有删除掉

原因是：因为当你把索引为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<arr.length;i++)
    {
        var li=document.createElement('li')
        li.innerHTML=arr[i];
        testList.appendChild(li);
    }

可是并没有创建好（页面没有任何显示），打开控制台有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<arr.length;i++)
    {
        console.log(arr[i]);
    }

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

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

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