每日一个js实例4---DOM操作ul排序

 <ul id="ul1">
       <li>28</li>
       <li>3</li>
       <li>13</li>
   </ul>

   <input type="button" value="转换" id="btn">

<script type="text/javascript">
    //1.依次替换
    function $(id){return document.getElementById(id)};
    var aLi=$("ul1").getElementsByTagName("li");
    var oUL2=document.createElement("ul");
    $("btn").οnclick=function(){
      oUL2.appendChild(aLi[0]);
    }
    document.body.appendChild(oUL2)

    //2.一次全部替换
    function $(id){return document.getElementById(id)};
    var aLi=$("ul1").getElementsByTagName("li");
    var oUL2=document.createElement("ul");
    $("btn").οnclick=function(){
      oUL2.appendChild($("ul1"));
    }
    document.body.appendChild(oUL2)

    //3.一次全部替换并排序
    function $(id){return document.getElementById(id)};
    var aLi=$("ul1").getElementsByTagName("li");
    var oUL2=document.createElement("ul");
    var arr=[];
    for(var i=0;i<aLi.length;i++){
          arr[i]=aLi[i].innerHTML;
          //alert(arr[i]);//28,3,13
      }
      //数组排序
    arr.sort(function (li1,li2) {
            return li1-li2;
    });
    // for(var i=0;i<arr.length;i++){
    //     alert(arr[i]);//3,13,28
    // }

    $("btn").οnclick=function(){
      for(var i=0;i<arr.length;i++){
          aLi[i].innerHTML=arr[i]
          oUL2.appendChild($("ul1"));
      }
      
    }
    document.body.appendChild(oUL2)

    //4.依次替换并排序
    function $(id){return document.getElementById(id)};
    var aLi=$("ul1").getElementsByTagName("li");
    var oUL2=document.createElement("ul");
    var arr=[];
    for(var i=0;i<aLi.length;i++){
          arr[i]=aLi[i].innerHTML;
          //alert(arr[i]);//28,3,13
      }
      //数组排序
    arr.sort(function (li1,li2) {
            return li1-li2;
    });
    // for(var i=0;i<arr.length;i++){
    //     alert(arr[i]);//3,13,28
    // }
      for(var i=0;i<arr.length;i++){
          aLi[i].innerHTML=arr[i];
          $("btn").οnclick=function(){
            var aLi2=document.createElement("li");
            if(aLi.length == 0){
                return false;
            }else{
                aLi2.appendChild(aLi[0]);
                oUL2.appendChild(aLi2);
            }    
          }
      }
    document.body.appendChild(oUL2)
</script>