欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

dom元素的增删改操作

程序员文章站 2022-05-08 10:48:07
...

dom元素的增删改操作

增加

    

  1. <script>
    2. 

  2.       const ul = document.createElement("ul");
    3. 

  3.       document.body.append(ul);
    4. 

    5. 

  5.       for (let i = 0; i < 5; i++) {
    6. 

  6.         const li = document.createElement("li");
    7. 

  7.         li.textContent = "item" + (i + 1);
    8. 

  8.         ul.append(li);
    9. 

  9.       }
    10. 

    11. 

  11.       console.log(ul);
    12. 

  12.       console.log(ul.outerHTML);
    13. 

  13. </script>
    14.

关键的操作都在上面的代码中，很直观。最后的两句输出的结果如下所示：
dom元素的增删改操作
outerHTML是元素的html字符串表示

插入

    

  1.       const three = document.querySelector("ul li:nth-of-type(3)");
    2. 

  2.       const li = document.createElement("li");
    3. 

  3.       li.textContent = "new item";
    4. 

  4.       li.style.color = "red";
    5. 

  5.       three.before(li);
    6. 

  6.       let cloneli = li.cloneNode(true);
    7. 

  7.       three.after(cloneli);
    8.

dom元素的增删改操作

函数名称都说明了函数的功能。注意一点，cloneNode如果没有参数true,就不是深克隆，那么节点的文本内容等属性就不能复制过去。

    

  1.       const h3 = document.createElement("h3");
    2. 

  2.       h3.textContent = "商品列表";
    3. 

  3.       ul.insertAdjacentElement("beforeBegin", h3);
    4.

dom元素的增删改操作
还有afterBegin,beforeEnd，afterEnd.

替换

    

  1.       const last = document.querySelector("ul li:last-of-type");
    2. 

  2.       const a = document.createElement("a");
    3. 

  3.       a.href = "https://php.cn";
    4. 

  4.       a.textContent = "php.cn";
    5. 

  5.       ul.replaceChild(a, last);
    6.

dom元素的增删改操作

移除

  1. ul.lastElementChild.remove();

textContent

    

  1.   <body>
    2. 

  2.     <div class="box">
    3. 

  3.       <style>
    4. 

  4.         h2 {
    5. 

  5.           color: red;
    6. 

  6.         }
    7. 

  7.       </style>
    8. 

  8.       <h2>通知</h2>
    9. 

  9.       <span style="display: none">13：00--14：00会供电</span>
    10. 

  10.       <p>本小区明天8：00-18：00停电</p>
    11. 

  11.     </div>
    12. 

    13. 

  13.     <script>
    14. 

  14.       const box = document.querySelector(".box");
    15. 

  15.       console.log(box.textContent);
    16. 

  16.     </script>
    17. 

  17.   </body>
    18.

dom元素的增删改操作
拿到的是内部所有标签的文本内容，不显示（display:none）的也能拿到
和它类比，还有一个很很很常用的是innerText.

  1.       console.log(box.innerText);

dom元素的增删改操作
一对比就能看出来，哪些style，display:none等它不拿。
还有一个innerHTML,是最好理解的，内部所有的HTML都取出来。看例子

  1.       console.log(box.innerHTML);

dom元素的增删改操作

innerText在2016年才成为W3C的标准，textContent兼容更好一些。

innerText 和 innerHTML

    

  1.       let p = document.createElement("p");
    2. 

  2.       let url = '<a href="https://php.cn"> php.cn </a>';
    3. 

  3.       p.innerText = url;
    4. 

  4.       box.append(p);
    5.

dom元素的增删改操作

    

  1.       let p = document.createElement("p");
    2. 

  2.       let url = '<a href="https://php.cn"> php.cn </a>';
    3. 

  3.       p.innerHTML = url;
    4. 

  4.       box.append(p);
    5.

dom元素的增删改操作

outerHTML

这个是返回当前自身的HTML字符串

    

  1.       console.log(box.outerHTML);
    2. 

  2.       box.outerHTML = null;   // 清空，当然也可以替换成其他内容，用null清空。
    3.

dom元素的增删改操作

上一篇： table标签用法

下一篇： rest语法|剩余参数|归并参数

推荐阅读