详解javascript appendChild()的完整功能

2024-05-06 16:45:46

字体：大中小

来源：转载

供稿：网友

appendChild()常用功能。

平时我们用appendChild的时候，都是向父级上添加子元素
appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。（移除再添加）。

代码说明

<!DOCTYPE html><html> <head>  <title>appendChild的第二种功能</title>  <script>   window.onload=function(){    var oUl1=document.getElementById("ul1");    var oUl2=document.getElementById("ul2");    var oBtn=document.getElementById("btn1");    oBtn.onclick=function(){     var oLi=oUl1.children[0];     oUl1.appendChild(oLi);    }   }  </script> </head> <body>  <ul id="ul1">   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>  </ul>  <input type="button" id="btn1" value="移动"> </body></html>

用appendChild的第二种功能实现一个li按照内容大小排序

<!DOCTYPE html><html> <head>  <title>appendChild的第二种功能</title>  <script>   window.onload=function(){    var oUl1=document.getElementById("ul1");    var oBtn=document.getElementById("btn1");    oBtn.onclick=function(){     var aLi=oUl1.getElementsByTagName("li");     // aLi是一个元素集合，不是真正意义的数组，不能用sort方法，转成数组再用sort排序     var arr=[];     for(var i=0; i<aLi.length; i++){      arr.push(aLi[i]);     }     arr.sort(function(li1,li2){      var n1=parseInt(li1.innerHTML);      var n2=parseInt(li2.innerHTML);      return n1-n2     });     for(var j=0; j<arr.length; j++){      oUl1.appendChild(arr[j]);//当添加子元素的时候以前的元素已经被删除，所以不会出现重复元素     }    }   }  </script> </head> <body>  <ul id="ul1">   <li>12</li>   <li>2</li>   <li>30</li>   <li>22</li>  </ul>  <input type="button" id="btn1" value="移动"> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JavaScript实现构造json数组的方法分析

下一篇：JavaScript实现淘宝京东6位数字支付密码效果