节点操作

Posted 2020-08-27 加号与剑豪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了节点操作相关的知识，希望对你有一定的参考价值。

插入节点 appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点。

插入节点 insertBefore() 方法可在已有的子节点前插入一个新的子节点。

删除节点 removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

替换元素节点 replaceChild() 实现子节点(对象)的替换。返回被替换对象的引用

<body>
<ul id="x">
  <li id="x1">2</li>
  <li id="x1">3</li>
</ul> 




<button onclick="qian()">前添加</button>
<button onclick="hou()">后添加</button>
<button onclick="shan()">删除</button>
<button onclick="ti()">替换（替换2和3）</button>


</body>



<script>
function hou(){
  var x1 = document.getElementById("x");  
  var x2 = document.createElement("li");
 x2.innerhtml = "4";
          x1.appendChild(x2);
}

function qian(){
var xx1 = document.getElementById("x");  
  var xx2=document.getElementById("x1");
  var xx3 = document.createElement("li");
 xx3.innerHTML = "1";
          xx1.insertBefore(xx3,xx2);
}

function shan(){
var xxx1=document.getElementById("x");
var xxx2=xxx1.removeChild(xxx1.childNodes[1]);
}

function ti(){
var z1 = document.createElement("en");    
        var z2 = document.getElementById("x1");  
        z1.innerHTML = z2.innerHTML;  
        z2.parentNode.replaceChild(z1,z2);

}


</script>

以上是关于节点操作的主要内容，如果未能解决你的问题，请参考以下文章

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

理解 DocumentFragment

VSCode自定义代码片段——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment