getElementsByTagName() / getElementsByClassName()
返回的不是array 是元素集合 只有length和[]可以使用
appendChild()
1 先把元素从原有父级上删掉
2 添加到新父级末尾
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById("sort");
var ul = document.getElementsByTagName("ul")[0];
var lis = ul.getElementsByTagName("li"); // 返回的不是array 是元素集合 只有length和[]可以使用
console.log(typeof lis); // object
//lis.sort(); //Uncaught TypeError: lis.sort is not a functionat window.onload (dom6.html:13)
var arr = [];
btn.onclick = function(){
for(var i = 0; i < lis.length; i++){
arr[i] = lis[i];
}
arr.sort(function(li1, li2){
return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);
});
for(var i = 0; i < arr.length; i++){
ul.appendChild(arr[i]); //1 先把元素从原有父级上删掉 2 添加到新父级末尾
}
}
}
</script>
</head>
<body>
<button id="sort">排序</button>
<ul>
<li>55</li>
<li>18</li>
<li>33</li>
<li>77</li>
<li>46</li>
<li>41</li>
<li>88</li>
<li>22</li>
<li>125</li>
</ul>
</body>
</html>
网友评论