思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入
<body>
<input type="button" value="排序按钮" id="btn1">
<ul id="ul1">
<li>58</li>
<li>8</li>
<li>31</li>
<li>98</li>
<li>75</li>
</ul>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById("btn1");
var arr=[];
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var i;
var bAsc=true;
oBtn.οnclick=function(){
for(i=0;i<aLi.length;i++){
arr[i]=aLi[i];
}
arr.sort(function(li1,li2){
if(bAsc){
return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
}
else{
return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);
}
});
for(i=0;i<arr.length;i++){
oUl.appendChild(arr[i]); //appendChild实际上分两步 1.先移除父级 2.添加到新的父级 (添加到原本的父级就相当于把当前元素拿到队列的末尾)
}
if(bAsc){
bAsc=false;
} ==>bAsc=!bAsc; //简化写法
else{
bAsc=true;
}
};
}
</script>
</body>