javascript appendChild()的完全功用

2023年1月24日 138次阅读 来源: 666888

appendChild()经常使用功用。

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

我们用appendChild的第二种功用做一个li根据内容从小到大排序的例子。

代码申明

<!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>
    原文作者：666888
    原文地址: https://segmentfault.com/a/1190000016052872
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞