Common functions of appendChild().
- When we use appendChild, we always add child elements to the parent.
- Another function of appendChild is to first delete the element from the original parent and then add the element to the new parent. (Remove and add).
Code description
<!DOCTYPE html>
<html>
<head>
<title>appendChildThe second function</title>
<script>
=function(){
var oUl1=("ul1");
var oUl2=("ul2");
var oBtn=("btn1");
=function(){
var oLi=[0];
(oLi);
}
}
</script>
</head>
<body>
<ul >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="move">
</body>
</html>
Use the second function of appendChild to implement a li sorting according to content size
<!DOCTYPE html>
<html>
<head>
<title>appendChildThe second function</title>
<script>
=function(){
var oUl1=("ul1");
var oBtn=("btn1");
=function(){
var aLi=("li");
// aLi is an element collection, not a true array, you cannot use the sort method, convert it into an array and then sorted with sort var arr=[];
for(var i=0; i<; i++){
(aLi[i]);
}
(function(li1,li2){
var n1=parseInt();
var n2=parseInt();
return n1-n2
});
for(var j=0; j<; j++){
(arr[j]);//When adding child elements, the previous element has been deleted, so there will be no duplicate elements }
}
}
</script>
</head>
<body>
<ul >
<li>12</li>
<li>2</li>
<li>30</li>
<li>22</li>
</ul>
<input type="button" value="move">
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.