当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解javascript appendChild()的完整功能

详解javascript appendChild()的完整功能

2018年09月26日  | 移动技术网IT编程  | 我要评论

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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网