写在前面：
1.数组的几种排序方法：参考动画 http://jsdo.it/norahiko/oxIy/fullscreen
2.关于sort排序方法的底层实现研究 参考http://www.zhouhua.info/2015/06/18/quicksort/
3.具体实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <script type="text/javascript"> 7 window.onload=function () 8 { 9 var oUl1=document.getElementById("ul1"); 10 var oUl2=document.getElementById("ul2"); 11 var oBtn=document.getElementById("btn"); 12 var oUl3=document.getElementById("ul3"); 13 14 oBtn.onclick=function () 15 { //把ul1中的元素移动到ul2中去。 16 17 /* oUl1.removeChild(oLi[0]); 18 oUl2.appendChild(oLi[0]);*/ //此方法相当于把第一个li也就是1remove掉，li也就是2变为oLi[0]，appendChild后ul1中2被删除，然后被添加到ul2，此时ul1位3,4而ul2为2，以此类推； 19 20 /* var oLi=oUl1.getElementsByTagName("li"); 21 var x = oUl1.removeChild(oLi[0]); 22 oUl2.appendChild(x); */ //此方法与下面的方法类似，但思路不同。此方法是把child先remove掉存起来再append；下面的方法是先存起来，再进行remove和append。 23 24 /* var oLi=oUl1.children[0]; 25 oUl1.removeChild(oLi); 26 oUl2.appendChild(oLi); */ 27 28 /* var oLi=oUl1.children[0]; 29 oUl2.appendChild(oLi);*/ //append的作用是1.先把元素从原有父级上删掉 2.添加到新的父级 30 31 //把ul1中的元素从最上移动到最下面 32 /*var oLi=oUl1.children[0]; 33 oUl1.appendChild(oLi);*/ 34 35 var aLi=oUl3.getElementsByTagName("li"); 36 var arr=[]; 37 38 for(var i=0;i<aLi.length;i++) //aLi只是一个元素集合，有length，有[i]，但不是arry，无法使用sort，jion等函数，所以要将aLi中的元素放到一个数组中，然后使用sort函数 39 { 40 arr[i]=aLi[i]; 41 } 42 arr.sort(function (li1,li2){ //sort函数如何使用，其中的参数li1，li2并未定义，怎么可以直接使用？ 43 var n1=parseInt(li1.innerHTML); //表单元素用value，其他非输入（表单）类元素用innerHTML，如:div, span,em等 44 var n2=parseInt(li2.innerHTML); 45 return n1-n2; 46 }); 47 for(var j=0;j<aLi.length;j++) 48 { 49 oUl3.appendChild(arr[j]); 50 }; 51 }; 52 }; 53 </script> 54 </head> 55 <body> 56 <ul id="ul1" style="background:red"> 57 <li>1</li> 58 <li>2</li> 59 <li>3</li> 60 <li>4</li> 61 </ul> 62 <input id="btn" type="button" value="联通" /> 63 <ul id="ul2" style="background=yellow"></ul> 64 <br> 65 <ul id="ul3"> 66 <li>56</li> 67 <li>98</li> 68 <li>23</li> 69 <li>5</li> 70 <li>48</li> 71 </ul> 72 </body> 73 </html>