JS實現添加,替換,刪除節點元素的方法

2019-11-20 09:34:45

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>