码迷,mamicode.com
首页 > 其他好文 > 详细

节点操作

时间:2017-01-13 22:16:17      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:对象   子节点   before   失败   regular   node   引用   java   onclick   

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

 

 

 

 

 

 

节点操作

标签:对象   子节点   before   失败   regular   node   引用   java   onclick   

原文地址:http://www.cnblogs.com/yjh1604600160/p/q-9.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!