js-操作dom树1（appendChild ()/insertBefore()）

最新推荐文章于 2022-11-29 10:03:33 发布

朱琳的博客

最新推荐文章于 2022-11-29 10:03:33 发布

阅读量711

点赞数

分类专栏： javascript 文章标签： dom js

本文链接：https://blog.csdn.net/zhulin0519/article/details/49816093

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

appendChild方法

添加子节点到末尾
特点：可以实现类似于剪切黏切的效果

<style type="text/css">
   #div1{
   width:200px;
   height:150px;
   border:2px solid red;
   }
   #div2{
   width:200px;
   height:150px;
   border:5px dashed green;
   }
  </style>
 </head>
 <body>
 <div id="div1" >
    <ul id="ul1">
        <li>111</li>
        <li>111</li>
    </ul>
 </div>
 <div id="div2" >

 </div>
 <input type="button" value="add" onclick="add();"/>
 <script type="text/javascript">
  function add(){
   var li3=document.getElementById("div2");
   var li3=document.getElementById("ul1");
   div2.appendChild(ul1);
  }
 </script>
 </body>

insertBefore（newNode,oldNode）方法

在某个节点之前插入一个新的节点
两个参数
要插入的节点，在谁之前插入
插入一个节点，节点不存在，需要创建。

<body>
 <ul id="ul1">
    <li id="li1">1</li>
    <li id="li2">2</li>
    <li id="li3">5</li>
    <li id="li4">6</li>
 </ul>
 <input type="button" value="add" onclick="add();"/>
 <script type="text/javascript">
 function add(){
    /*
    1.获取到li3的标签
    2.创建li
    3.创建文本
    4.把文本添加到li下面
    5.获取到ul
    6.把li添加到ul下面
    */
    var li3=document.getElementById("li3");
    var li5=document.createElement("li5");
    var text5=document.createTextNode("555");
    li5.appendChild(text5);
    var ul1=document.getElementById("ul1");
    ul1.insertBefore(li5,li3);
 }
 </script>
 </body>

朱琳的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-操作dom树1（appendChild ()/insertBefore()）

appendChild方法添加子节点到末尾特点：可以实现类似于剪切黏切的效果<style type="text/css"> #div1{ width:200px; height:150px; border:2px solid red; } #div2{ width:200px; height:150px; border:5px dashed
复制链接

扫一扫