js-dom树2（删除，复制，替换节点）

最新推荐文章于 2024-06-01 18:37:55 发布

朱琳的博客

最新推荐文章于 2024-06-01 18:37:55 发布

阅读量1.3k

点赞数

分类专栏： javascript

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

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

removeChild方法：删除节点

<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="remove();"/>
 <script type="text/javascript">
 function remove(){
    /*
    1.获取到li3的标签
    2.创建li
    3.创建文本
    4.把文本添加到li下面
    5.获取到ul
    6.把li添加到ul下面
    */
    var li3=document.getElementById("li3");
    var ul1=document.getElementById("ul1");
    ul1.removeChild(li3);
 }
 </script>
 </body>

replaceChild(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="remove();"/>
 <script type="text/javascript">
 function remove(){
    /*
    1.获取到li3的标签
    2.创建li
    3.创建文本
    4.把文本添加到li下面
    5.获取到ul
    6.把li添加到ul下面
    */
    var li3=document.getElementById("li3");
    var ul1=document.getElementById("ul1");
    var li5=document.createElement("li5");
    var tex5=document.createTextNode("7");
    li5.appendChild(tex5);
    ul1.replaceChild(li5,li3);
 }
 </script>
 </body>

cloneNode(boolean);复制节点

<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>
 <div id="div1">
 </div>
 <input type="button" value="add" onclick="remove();"/>
 <script type="text/javascript">
 function remove(){
    var ul1=document.getElementById("ul1");
    var div1=document.getElementById("div1");
    var ul2=ul1.cloneNode(true);
    div1.appendChild(ul2);

 }
 </script>
 </body>

朱琳的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-dom树2（删除，复制，替换节点）

removeChild方法：删除节点<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="remove();"/>
复制链接

扫一扫

专栏目录