JavaScript:dom元素的增删改查操作

2021年04月07日 23:34:24阅读数:42博客 / WSC /

dom元素的增删改查操作

  1. <script>
  2. // 创建一个列表
  3. const ul = document.createElement("ul");
  4. // 用循环来生成多个列表项li
  5. for (let i = 1; i <= 5; i++) {
  6. let li = document.createElement("li");
  7. li.textContent = `item${i}`;
  8. //append():在尾部追加节点
  9. ul.append(li);
  10. }
  11. document.body.append(ul);
  12. // prepend(): 在头部追加节点
  13. li = document.createElement("li");
  14. li.textContent = "第一个";
  15. li.style.color = "blue";
  16. ul.prepend(li);
  17. //在除了头尾之外的地方添加,必须要有一个参考节点的位置
  18. // 以第四个节点为参考
  19. const referNode = document.querySelector("li:nth-of-type(4)");
  20. referNode.style.background = "red";
  21. // 在它之前添加一个新节点
  22. li = document.createElement("li");
  23. li.textContent = "在参考节点前插入";
  24. li.style.background = "yellow";
  25. // referNode.before(el),在插入位置(参考节点)上调用
  26. referNode.before(li);
  27. // 在它之后添加一个新节点
  28. li = document.createElement("li");
  29. li.textContent = "在参考节点后插入";
  30. li.style.background = "cyan";
  31. // referNode.after(el),在插入位置(参考节点)上调用
  32. referNode.after(li);
  33. // replaceWith():替换节点
  34. // 将最后一个节点用链接替换
  35. let lastItem = document.querySelector("ul li:last-of-type");
  36. let a = document.createElement("a");
  37. a.textContent = "php中文网";
  38. a.href = "http://php.cn";
  39. lastItem.replaceWith(a);
  40. // 删除节点,在被删除的节点上直接调用
  41. // 将ul的第6个删除,remove(无参数)
  42. ul.querySelector(":nth-of-type(6").remove();
  43. // insertAdjacentElement('插入位置', 元素)
  44. // afterBegin: 起始始标签之后,第一个子元素
  45. // beforeBegin: 起始标签之前,是它的前一个兄弟元素
  46. // afterEnd: 结束标签之后,它的下一个兄弟元素
  47. // beforeEnd: 结束标签之前,它的最后一个子元素
  48. li = document.createElement("li");
  49. li.textContent = "插入的元素";
  50. // 起始始标签之后
  51. ul.insertAdjacentElement("afterbegin", li);
  52. // 起始标签之前
  53. ul.insertAdjacentElement("beforebegin", li);
  54. // 可以直接使用html字符串当元素
  55. ul.insertAdjacentHTML(
  56. "beforeend",
  57. '<li style="color:red">插入的元素</li>'
  58. );
  59. // 直接插入文本
  60. const h2 = document.createElement("h2");
  61. // 结束标签之前
  62. h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);
  63. // 结束标签之后
  64. // document.body.insertAdjacentElement("afterend", h2);
  65. </script>

批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    WSC
    博文
    8
    粉丝
    0
    评论
    0
    访问量
    289
    积分:0
    P豆:16