JS實現(xiàn)添加,替換,刪除節(jié)點元素的方法
本文實例講述了JS實現(xiàn)添加,替換,刪除節(jié)點元素的方法。分享給大家供大家參考,具體如下:
一直以來,對于節(jié)點操作比較糾結(jié),特別是插入到某某節(jié)點之后.居然沒有這個方法,以前的我寫的方法有問題,是把新節(jié)點插入到舊節(jié)點的里面去了,還是該用insertBefore方法可以實現(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é)點
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é)點
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>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript替換操作技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
盤點javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯?,F(xiàn)在分享給大家,希望能給大家一個參考2016-03-03
JavaScript基礎(chǔ)篇(6)之函數(shù)表達(dá)式閉包
這篇文章主要介紹了javascript基礎(chǔ)篇(6)之函數(shù)表達(dá)式閉包的相關(guān)資料,需要的朋友可以參考下2015-12-12
scrollWidth,clientWidth,offsetWidth的區(qū)別
這篇文章主要介紹了scrollWidth,clientWidth,offsetWidth的區(qū)別,需要的朋友可以參考下2015-01-01
js+canvas實現(xiàn)可自動吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)可自動吸附閉合的鼠標(biāo)繪制多邊形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
Javascript實現(xiàn)頁面滾動時導(dǎo)航智能定位
本篇文章主要介紹了Javascript實現(xiàn)頁面滾動時導(dǎo)航智能定位,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05

