JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作示例

2019-11-19 13:23:08

字體：大中小

供稿：網(wǎng)友

本文實例講述了JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作。分享給大家供大家參考，具體如下：

<!doctype html><html><head><meta charset="utf-8"><title>www.survivalescaperooms.com JS節(jié)點插入</title>  <script>    function showinsert(){ //添加子節(jié)點      var str=document.getElementById("mydiv");      var zif="段落五";      var obj=document.createElement("p"); //添加哪類節(jié)點      var objNode=document.createTextNode(zif); //創(chuàng)建文字節(jié)點      str.appendChild(obj);      obj.appendChild(objNode);    }    function showesideinsert(){ //添加兄弟節(jié)點      var str=document.getElementById("mydiv");      var zi="添加段落";      var strBrother=str.children[1];      var strNode=document.createElement("p");      var strTextNode=document.createTextNode(zi);      str.insertBefore(strNode,strBrother);      strNode.appendChild(strTextNode);    }  </script></head><body>  <div id="mydiv">    <p onClick="showinsert()">段落一    <p onClick="showesideinsert()">段落二    <p>段落三    <p>段落四  </div></body></html>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試運行效果如下：