【JS】DOM增删改(1元素增删改，2操作元素内容，3指定位置插入) - PHP前端

Home > List of blog posts > 【JS】DOM增删改(1元素增删改，2操作元素内容，3指定位置插入)

Blogger Information

Blog 94

fans 0

comment 0

visits 92650

Special Recommendation

More>

Related recommendations

DOM增删改(1元素增删改，2操作元素内容，3指定位置插入)

1.DOM元素的增删改

1.创建元素：createElement()
2.追加元素 :append()
3.创建片断：createDocumentFragment
4.后面添加：after()
5.前面添加：before()
6.克隆节点：cloneNode(true)
7.替换子元素：replaceChild()
8.删除元素：remove()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM元素的增删改</title>
  </head>
  <body>
    <script>
      /**
       * * 1.创建元素：createElement()
       * * 2.追加元素 :append()
       * * 3.创建片断：createDocumentFragment
       * * 4.后面添加：after()
       * * 5.前面添加：before()
       * * 6.克隆节点：cloneNode(true)
       * * 7.替换子元素：replaceChild()
       * * 8.删除元素：remove()
       */
      //1. 创建元素：createElement()
      const ul = document.createElement('ul');
      //2. 追加元素：append()
      //获取元素
      //  console.log(document.body)
      //  console.log(document.head)
      //  console.log(document.title)
      //  console.log(document.doctype)
      //  console.log(document.URL)
      //  console.log(document.defaultView)
      //  console.log(document.documentElement)
      // 3. 创建文档片段：createDocumentFragment()
      document.body.append(ul);
      //创建一个临时父级
      const frag = document.createDocumentFragment();
      for (let i = 1; i <= 5; i++) {
        const li = document.createElement('li');
        li.append(`item-${i}`);
        //先挂载到临时文档片断元素中（临时父级）
        //所有的操作，全在内存中进行，不会造成页面的无效重复渲染
        frag.append(li);
      }
      //统一渲染，片段挂载到ul上，只需要渲染一次
      ul.append(frag);
      // 4.后面添加：after()
      //在第3个元素后面添加一个新的<li>,分三步
      // 第一步：先要找到第3个元素
      const three = ul.querySelector(':nth-child(3)');
      // 第二步：创建一个新的元素
      let li = document.createElement('li');
      li.append('after item');
      // 第三步：添加到第3个元素后面
      three.after(li);
      // 5.前面添加：before()
      // 第一步：先要找到第3个元素
      // 第二步：创建一个新的元素
      li = document.createElement('li');
      li.append('before item');
      // 第三步：添加到第3个元素后面
      three.before(li);
      // 6.克隆节点：cloneNode(true)
      // true:深度克隆。将后代全部复制
      li = li.cloneNode(true);
      li.append('last item');
      ul.append(li);
      // 7.替换子元素：replaceChild()
      // replaceChild(新元素,旧元素)
      // 任务：将第一个元素替换
      // 第一步：找到第一个
      const first = ul.firstElementChild;
      // 第二步：创建一个新元素
      const h3 = document.createElement('h3');
      h3.append('php中文网');
      // 第三步：替换
      ul.replaceChild(h3, first);
      // 8.删除元素：remove()
      ul.firstElementChild.remove();
      ul.lastElementChild.remove();
      three.remove();
    </script>
  </body>
</html>

2.操作元素内容

1.textContent:全部内容（包括JS，css,隐藏内容）
2.innerText:返回已渲染（可见）内容
3.innerHTML:替换元素内容(html)
4.outerHTML:替换元素自身（html）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>操作元素内容</title>
  </head>
  <body>
    <div class="box">
      <style>
        h2 {
          color: red;
        }
      </style>
      <h2>通知</h2>
      <span style="display: none">试用期员工不参加</span>
      <p>今天下午17：00开会，开发部，运营部全部参加</p>
    </div>
    <script>
      /**
       *  * 1.`textContent`:全部内容（包括JS，css,隐藏内容）
       *  * 2.`innerText`:返回已渲染（可见）内容
       *  * 3.`innerHTML`:替换元素内容(html)
       *  * 4.`outerHTML`:替换元素自身（html）
       */
      //box
      const box = document.querySelector('.box');
      let content = box.textContent;
      console.log(content);
      // 2. `innerText`:返回已渲染(可见)内容
      content = box.innerText;
      console.log(content);
      // 3.`innerHTML`:替换元素内容(html)
      box.innerHTML = '<h2>php中文网</h2>';
      // 4.`outerHTML`:替换元素自身（html）
      //box.outerHTML = '<h1>php中文网</h1>';
      box.outerHTML = null;
      // 干掉了box div
    </script>
  </body>
</html>

3.指定位置插入

指定位置插入

1）插入位置

1.beforebegin：起始元素前面
2.afterbegin：起始元素之后
3.beforeend：结束元素之前
4.afterend：结束元素之后

2）API方法

1.insertAdjacentElement()：指定位置插入元素
2.insertAdjacentIext()：指定位置插入文本节点
3.insertAdjacentHTML：指定位置插入元素节点（DOMString）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定位置插入</title>
</head>
<body>
    <div class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </div>
    <script>
        // 指定位置插入
        // （1）插入位置
        // 1.`beforebegin`：起始元素前面
        // 2.`afterbegin`：起始元素之后
        // 3.`beforeend`：结束元素之前
        // 4.`afterend`：结束元素之后
        // （2）API方法
        // 1.`insertAdjacentElement()`：指定位置插入元素
        // 2.`insertAdjacentIext()`：指定位置插入文本节点
        // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
        const list = document.querySelector('.list');
        //1.`insertAdjacentElement()`：指定位置插入元素
        const h3 = document.createElement('h3');
        h3.textContent='商品列表';
        list.insertAdjacentElement('beforebegin',h3)
        // 2.`insertAdjacentIext()`：指定位置插入文本节点
        h3.insertAdjacentText('beforeend','(特价)')
        // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
        // 创建html元素：createElement(),element.innerHTML
        // 可以将HTML字符串，直接解析成html元素
        let p = '<p style="color:red">商品数量：5 件</p>';
        // list.after(p);
        // list.innerHTML =p;
        list.insertAdjacentHTML('afterend',p);
    </script>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59