search

博客列表 >【JS】DOM增删改(1元素增删改，2操作元素内容，3指定位置插入)

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

可乐随笔
可乐随笔原创
2022年12月03日 15:49:15396浏览

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

1.DOM元素的增删改

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>DOM元素的增删改</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       /**
  12.        * * 1.创建元素：createElement()
  13.        * * 2.追加元素 :append()
  14.        * * 3.创建片断：createDocumentFragment
  15.        * * 4.后面添加：after()
  16.        * * 5.前面添加：before()
  17.        * * 6.克隆节点：cloneNode(true)
  18.        * * 7.替换子元素：replaceChild()
  19.        * * 8.删除元素：remove()
  20.        */
  22.       //1. 创建元素：createElement()
  23.       const ul = document.createElement('ul');
  25.       //2. 追加元素：append()
  26.       //获取元素
  27.       //  console.log(document.body)
  28.       //  console.log(document.head)
  29.       //  console.log(document.title)
  30.       //  console.log(document.doctype)
  31.       //  console.log(document.URL)
  32.       //  console.log(document.defaultView)
  33.       //  console.log(document.documentElement)
  35.       // 3. 创建文档片段：createDocumentFragment()
  36.       document.body.append(ul);
  37.       //创建一个临时父级
  38.       const frag = document.createDocumentFragment();
  39.       for (let i = 1; i <= 5; i++) {
  40.         const li = document.createElement('li');
  41.         li.append(`item-${i}`);
  42.         //先挂载到临时文档片断元素中（临时父级）
  43.         //所有的操作，全在内存中进行，不会造成页面的无效重复渲染
  44.         frag.append(li);
  45.       }
  46.       //统一渲染，片段挂载到ul上，只需要渲染一次
  47.       ul.append(frag);
  49.       // 4.后面添加：after()
  50.       //在第3个元素后面添加一个新的<li>,分三步
  51.       // 第一步：先要找到第3个元素
  52.       const three = ul.querySelector(':nth-child(3)');
  53.       // 第二步：创建一个新的元素
  54.       let li = document.createElement('li');
  55.       li.append('after item');
  56.       // 第三步：添加到第3个元素后面
  57.       three.after(li);
  59.       // 5.前面添加：before()
  60.       // 第一步：先要找到第3个元素
  61.       // 第二步：创建一个新的元素
  62.       li = document.createElement('li');
  63.       li.append('before item');
  64.       // 第三步：添加到第3个元素后面
  65.       three.before(li);
  67.       // 6.克隆节点：cloneNode(true)
  68.       // true:深度克隆。将后代全部复制
  69.       li = li.cloneNode(true);
  70.       li.append('last item');
  71.       ul.append(li);
  73.       // 7.替换子元素：replaceChild()
  74.       // replaceChild(新元素,旧元素)
  75.       // 任务：将第一个元素替换
  76.       // 第一步：找到第一个
  77.       const first = ul.firstElementChild;
  78.       // 第二步：创建一个新元素
  79.       const h3 = document.createElement('h3');
  80.       h3.append('php中文网');
  81.       // 第三步：替换
  82.       ul.replaceChild(h3, first);
  84.       // 8.删除元素：remove()
  85.       ul.firstElementChild.remove();
  86.       ul.lastElementChild.remove();
  87.       three.remove();
  88.     </script>
  89.   </body>
  90. </html>

2.操作元素内容

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>操作元素内容</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <style>
  12.         h2 {
  13.           color: red;
  14.         }
  15.       </style>
  16.       <h2>通知</h2>
  17.       <span style="display: none">试用期员工不参加</span>
  18.       <p>今天下午17：00开会，开发部，运营部全部参加</p>
  19.     </div>
  21.     <script>
  22.       /**
  23.        *  * 1.`textContent`:全部内容（包括JS，css,隐藏内容）
  24.        *  * 2.`innerText`:返回已渲染（可见）内容
  25.        *  * 3.`innerHTML`:替换元素内容(html)
  26.        *  * 4.`outerHTML`:替换元素自身（html）
  27.        */
  28.       //box
  29.       const box = document.querySelector('.box');
  30.       let content = box.textContent;
  31.       console.log(content);
  33.       // 2. `innerText`:返回已渲染(可见)内容
  34.       content = box.innerText;
  35.       console.log(content);
  37.       // 3.`innerHTML`:替换元素内容(html)
  38.       box.innerHTML = '<h2>php中文网</h2>';
  40.       // 4.`outerHTML`:替换元素自身（html）
  41.       //box.outerHTML = '<h1>php中文网</h1>';
  42.       box.outerHTML = null;
  43.       // 干掉了box div
  44.     </script>
  45.   </body>
  46. </html>

3.指定位置插入

指定位置插入

1）插入位置

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

2）API方法

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>指定位置插入</title>
  8. </head>
  9. <body>
  11.     <div class="list">
  12.         <li>item1</li>
  13.         <li>item2</li>
  14.         <li>item3</li>
  15.         <li>item4</li>
  16.         <li>item5</li>
  17.     </div>
  19.     <script>
  20.         // 指定位置插入
  21.         // （1）插入位置
  22.         // 1.`beforebegin`：起始元素前面
  23.         // 2.`afterbegin`：起始元素之后
  24.         // 3.`beforeend`：结束元素之前
  25.         // 4.`afterend`：结束元素之后
  27.         // （2）API方法
  28.         // 1.`insertAdjacentElement()`：指定位置插入元素
  29.         // 2.`insertAdjacentIext()`：指定位置插入文本节点
  30.         // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
  32.         const list = document.querySelector('.list');
  34.         //1.`insertAdjacentElement()`：指定位置插入元素
  35.         const h3 = document.createElement('h3');
  36.         h3.textContent='商品列表';
  37.         list.insertAdjacentElement('beforebegin',h3)
  39.         // 2.`insertAdjacentIext()`：指定位置插入文本节点
  40.         h3.insertAdjacentText('beforeend','(特价)')
  42.         // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
  44.         // 创建html元素：createElement(),element.innerHTML
  46.         // 可以将HTML字符串，直接解析成html元素
  47.         let p = '<p style="color:red">商品数量：5 件</p>';
  48.         // list.after(p);
  49.         // list.innerHTML =p;
  50.         list.insertAdjacentHTML('afterend',p);
  52.     </script>
  53. </body>
  54. </html>
上一条：【JS】元素操作实战：todoList：留言板下一条：数据库数据表的整页显示与分页显示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多