javascript appendChild()的完整功能

最新推荐文章于 2023-06-28 12:42:04 发布

weixin_33991727

最新推荐文章于 2023-06-28 12:42:04 发布

阅读量585

点赞数

文章标签： javascript 爬虫 ViewUI

原文链接：https://segmentfault.com/a/1190000016052872

版权

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>

weixin_33991727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript appendChild()的完整功能

appendChild()常用功能。平时我们用appendChild的时候，都是向父级上添加子元素appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。（移除再添加）。我们用appendChild的第二种功能做一个li按照内容从小到大排序的例子。代码说明<!DOCTYPE html&g...
复制链接

扫一扫

javascript appendChild()的完整功能

appendChild()常用功能。

代码说明

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

“相关推荐”对你有帮助么？