每日一个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").onclick=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").onclick=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").onclick=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").onclick=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>