快捷導(dǎo)航

JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法

更新時間：2016年06月30日 15:10:36 作者：小剛_xiaogang

這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法。分享給大家供大家參考，具體如下：

一直以來,對于節(jié)點(diǎn)操作比較糾結(jié),特別是插入到某某節(jié)點(diǎn)之后.居然沒有這個方法,以前的我寫的方法有問題,是把新節(jié)點(diǎn)插入到舊節(jié)點(diǎn)的里面去了,還是該用insertBefore方法可以實(shí)現(xiàn)

下面是方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
 <title>page85刪除替換插入</title> 
</head>
<body onload="insertMessageafter()">
 <p id="p1">Hello World</p>
</body>
</html>
<script>
 function removeMessage(){
 var op = document.getElementByIdx_x("p1");
 //document.body.removeChild(op);
 //op.parentNode返回父類節(jié)點(diǎn)
 op.parentNode.removeChild(op);
 }
 function replaceMessage(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 //alert(newop.innerHTML);
 var oldop = document.getElementByIdx_x("p1");
 //document.body.removeChild(op);
 //op.parentNode返回父類節(jié)點(diǎn)
 oldop.parentNode.replaceChild(newop,oldop);
 //document.body.replaceChild(newop,oldop)
 }
 function insertMessagebefore(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 oldop.parentNode.insertBefore(newop,oldop);
 }
 function insertMessageafter(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 insertafter(newop,oldop);
 }
 function insertbefore(newnode,oldnode){
 oldnode.parentNode.insertBefore(newnode,oldnode);
 }
 function insertafter(newnode,oldnode){
 //判斷oldnode后面還有沒有同類別的標(biāo)記
  var nextnode = oldnode.nextSibling;
 if(nextnode){ //如果沒有則為null,則為false,有的話就為true
  oldnode.parentNode.insertBefore(newnode,nextnode);
 }else{
  oldnode.parentNode.appendChild(newnode);
 }
 }
</script>