首页 > 代码库 > 节点操作

节点操作

2024-08-31 22:53:53   218人阅读

插入节点               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>

 

 

 

 

 

 

节点操作


联系
我们