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