本文實例講述了JS實現添加,替換,刪除節點元素的方法。分享給大家供大家參考,具體如下:
一直以來,對於節點操作比較糾結,特別是插入到某某節點之後.居然沒有這個方法,以前的我寫的方法有問題,是把新節點插入到舊節點的裡面去了,還是該用insertBefore方法可以實現
下面是方法:
<!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返回父類節點
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返回父類節點
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後面還有沒有同類別的標記
var nextnode = oldnode.nextSibling;
if(nextnode){ //如果沒有則為null,則為false,有的話就為true
oldnode.parentNode.insertBefore(newnode,nextnode);
}else{
oldnode.parentNode.appendChild(newnode);
}
}
</script>
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript替換操作技巧總結》、《JavaScript傳值操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。