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

来源：互联网发布：运营数据分析专员编辑：程序博客网时间：2024/05/21 00:48

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