<input id="btn1" type="button" value="排序" />
<ul id="tab1" style="background:pink">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
<script>
window.onload = function () {
var oTab = document.querySelectorAll('ul li');
var oBtn = document.getElementById('btn1');
var oTab1 = document.querySelector("#tab1")
oBtn.onclick=function(){
var arr = [];
for(var i=0;i<oTab.length;i++){
arr[i]=oTab[i]
}
arr.sort(function(tr1,tr2){
var n1 = parseInt(tr1.innerHTML)
var n2 = parseInt(tr2.innerHTML)
return n1-n2;
})
for(var i=0;i<arr.length;i++){
oTab1.appendChild(oTab[i])
oTab1.appendChild(arr[i])
}
}
}
</script>
这个输出的结果是什么?为什么是这个结果?

解决方案 »

  1.   

    oTab1.appendChild(oTab[i])导致的原因,具体原因也很疑惑
      

  2.   

    删除这行就可以了 oTab1.appendChild(oTab[i])oTab没排序,arr是排过序的,按这2个的顺序重排
    得到结果:34, 9,  25, 25, 9, 34, 88, 54, 54, 88
    从前面去掉重复的,就是最后的结果了
      

  3.   

     oTab1.appendChild(oTab[i]) 这行是多于的,会扰乱重新移动元素,需要删除
      

  4.   

    主要是不知道为什么结果是:
    34
    25
    9
    88
    54
    。是因为元素移动吗?不是JS拷贝问题吗?appendChild是移动元素 ,不是拷贝