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