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

dom元素的增删改查操作

 <script>
      // 创建一个列表
      const ul = document.createElement("ul");
      // 用循环来生成多个列表项li
      for (let i = 1; i <= 5; i++) {
        let li = document.createElement("li");
        li.textContent = `item${i}`;
        //append():在尾部追加节点
        ul.append(li);
      }
      document.body.append(ul);
      // prepend(): 在头部追加节点
      li = document.createElement("li");
      li.textContent = "第一个";
      li.style.color = "blue";
      ul.prepend(li);
      //在除了头尾之外的地方添加,必须要有一个参考节点的位置
      //   以第四个节点为参考
      const referNode = document.querySelector("li:nth-of-type(4)");
      referNode.style.background = "red";
      // 在它之前添加一个新节点
      li = document.createElement("li");
      li.textContent = "在参考节点前插入";
      li.style.background = "yellow";
      //   referNode.before(el),在插入位置(参考节点)上调用
      referNode.before(li);
      // 在它之后添加一个新节点
      li = document.createElement("li");
      li.textContent = "在参考节点后插入";
      li.style.background = "cyan";
      // referNode.after(el),在插入位置(参考节点)上调用
      referNode.after(li);
      // replaceWith():替换节点
      // 将最后一个节点用链接替换
      let lastItem = document.querySelector("ul li:last-of-type");
      let a = document.createElement("a");
      a.textContent = "php中文网";
      a.href = "http://php.cn";
      lastItem.replaceWith(a);
      // 删除节点,在被删除的节点上直接调用
      // 将ul的第6个删除,remove(无参数)
      ul.querySelector(":nth-of-type(6").remove();
      // insertAdjacentElement('插入位置', 元素)
      // afterBegin: 起始始标签之后,第一个子元素
      // beforeBegin: 起始标签之前,是它的前一个兄弟元素
      // afterEnd: 结束标签之后,它的下一个兄弟元素
      // beforeEnd: 结束标签之前,它的最后一个子元素
      li = document.createElement("li");
      li.textContent = "插入的元素";
      //   起始始标签之后
      ul.insertAdjacentElement("afterbegin", li);
      //   起始标签之前
      ul.insertAdjacentElement("beforebegin", li);
      //   可以直接使用html字符串当元素
      ul.insertAdjacentHTML(
        "beforeend",
        '<li style="color:red">插入的元素</li>'
      );
      //   直接插入文本
      const h2 = document.createElement("h2");
      //   结束标签之前
      h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);
      //   结束标签之后
      //   document.body.insertAdjacentElement("afterend", h2);
    </script>