详解javascript appendChild()的完整功能

网络编程 2021-07-04 16:46www.168986.cn编程入门

这篇文章主要介绍了详解javascript appendChild()的完整功能，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

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>

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

上一篇：vue下history模式刷新后404错误解决方法下一篇：vue中的自定义分页插件组件的示例

详解javascript appendChild()的完整功能

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

详解javascript appendChild()的完整功能

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设