JavaScript中DOM节点的增删改查
前面一篇文章我们讲到了DOM节点的查询(遍历)，这篇文章把剩下的增删改一一进行讲解。
HTML代码：
<h1>04DOM节点的增删改</h1><divclass="box"><pclass="text1">这是一个段落标签01</p><pclass="text2">这是一个段落标签02</p><pclass="text3">这是一个段落标签03</p><pclass="text4">这是一个段落标签04</p></div><hr><button>添加</button><tableborder="1"><tr><td>111111</td><td>222222</td><td><button>删除</button><button>编辑</button></td></tr><tr><td>111111</td><td>222222</td><td><button>删除</button><button>编辑</button></td></tr><tr><td>111111</td><td>222222</td><td><button>删除</button><button>编辑</button></td></tr><tr><td>111111</td><td>222222</td><td><button>删除</button><button>编辑</button></td></tr><tr><td>111111</td><td>222222</td><td><button>删除</button><button>删除</button></td></tr></table>
CSS代码：
var oBox=document.getElementsByClassName("box")[0]; var aText=document.getElementsByTagName("p"); // 增 // createElement("标签/元素节点名") 创建一个元素节点 var newP=document.createElement("P");//大写标签名 newP.innerText="这是一个段落标签05"; newP.style.backgroundColor="purple"; var newP2=document.createElement("P");//大写标签名 newP2.innerText="这是一个段落标签06"; newP2.style.backgroundColor="orange"; var newP3=document.createElement("P");//大写标签名 newP3.innerText="这是一个段落标签07"; newP3.style.backgroundColor="orange"; // parentNode.appendChild(添加的节点) 向父元素的子节点末尾添加 oBox.appendChild(newP); // parentNode.insertBefore(添加的节点,参考的元素) 向兄弟元素前面添加 oBox.insertBefore(newP2,aText[2]); // innerHTML
2.改(替换元素)
// parentNode.replaceChild(新元素,旧元素) // oBox.replaceChild(aText[1],aText[3]); oBox.replaceChild(newP3,aText[0]);
3.删(移除节点)
// parentNode.removeChile(要删除的子节点) oBox.removeChild(aText[1]); var oBtn=document.getElementsByTagName("button")[0]; oBtn.onclick=function(){ this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode) }
