JavaScript中DOM节点的增删改查

妖狐艹你老母 2023-02-14 00:29 16阅读 0赞

JavaScript中DOM节点的增删改查

前面一篇文章我们讲到了DOM节点的查询(遍历),这篇文章把剩下的增删改一一进行讲解。

HTML代码:

  1. <h1>04DOM节点的增删改</h1>
  2. <div class="box">
  3. <p class="text1">这是一个段落标签01</p>
  4. <p class="text2">这是一个段落标签02</p>
  5. <p class="text3">这是一个段落标签03</p>
  6. <p class="text4">这是一个段落标签04</p>
  7. </div>
  8. <hr>
  9. <button>添加</button>
  10. <table border="1">
  11. <tr>
  12. <td>111111</td>
  13. <td>222222</td>
  14. <td><button>删除</button><button>编辑</button></td>
  15. </tr>
  16. <tr>
  17. <td>111111</td>
  18. <td>222222</td>
  19. <td><button>删除</button><button>编辑</button></td>
  20. </tr>
  21. <tr>
  22. <td>111111</td>
  23. <td>222222</td>
  24. <td><button>删除</button><button>编辑</button></td>
  25. </tr>
  26. <tr>
  27. <td>111111</td>
  28. <td>222222</td>
  29. <td><button>删除</button><button>编辑</button></td>
  30. </tr>
  31. <tr>
  32. <td>111111</td>
  33. <td>222222</td>
  34. <td><button>删除</button><button>删除</button></td>
  35. </tr>
  36. </table>

CSS代码:

  1. p{
  2. color: white;
  3. }
  4. .text1{
  5. background: red;
  6. }
  7. .text2{
  8. background: yellow;
  9. }
  10. .text3{
  11. background: blue;
  12. }
  13. .text4{
  14. background: green;
  15. }

1.增(创建元素,添加元素)

  1. var oBox=document.getElementsByClassName("box")[0];
  2. var aText=document.getElementsByTagName("p");
  3. // 增
  4. // createElement("标签/元素节点名") 创建一个元素节点
  5. var newP=document.createElement("P");//大写标签名
  6. newP.innerText="这是一个段落标签05";
  7. newP.style.backgroundColor="purple";
  8. var newP2=document.createElement("P");//大写标签名
  9. newP2.innerText="这是一个段落标签06";
  10. newP2.style.backgroundColor="orange";
  11. var newP3=document.createElement("P");//大写标签名
  12. newP3.innerText="这是一个段落标签07";
  13. newP3.style.backgroundColor="orange";
  14. // parentNode.appendChild(添加的节点) 向父元素的子节点末尾添加
  15. oBox.appendChild(newP);
  16. // parentNode.insertBefore(添加的节点,参考的元素) 向兄弟元素前面添加
  17. oBox.insertBefore(newP2,aText[2]);
  18. // innerHTML

2.改(替换元素)

  1. // parentNode.replaceChild(新元素,旧元素)
  2. // oBox.replaceChild(aText[1],aText[3]);
  3. oBox.replaceChild(newP3,aText[0]);

3.删(移除节点)

  1. // parentNode.removeChile(要删除的子节点)
  2. oBox.removeChild(aText[1]);
  3. var oBtn=document.getElementsByTagName("button")[0];
  4. oBtn.onclick=function(){
  5. this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
  6. }

视频讲解链接:
https://www.bilibili.com/video/BV1qv411z7t9/

发表评论

表情:
评论列表 (有 0 条评论,16人围观)

还没有评论,来说两句吧...

相关阅读