简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 实例演示dom增删改的常用方法 2. 改写留言板案例, 添加自定义样式
Blogger Information
Blog 37
fans 0
comment 0
visits 13964
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 实例演示dom增删改的常用方法 2. 改写留言板案例, 添加自定义样式
秋闲独醉
Original
263 people have browsed it
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <!-- 1. 实例演示dom增删改的常用方法 
  12.     2. 改写留言板案例, 添加自定义样式 -->
  13.     <script>
  14.       /**
  15.        *1.createElement(ele):创建新的元素，doucment上调用
  16.        *2.append(string/ele):追加到父级最后子节点后，在父节点上调用；也可在新元素上调用，添加内容。
  17.        *3.before(string/ele):某元素之前插入节点，在当前元素上调用
  18.        *4.after(string/ele):在某元素之后插入节点，在当前元素上调用
  19.        *5.cloneNode(true):克隆节点（true:包含子节点),在要被克隆的节点上调用
  20.        *6.replaceChild(ele,pos):替换子元素,在父级节点上调用
  21.        *7.node.remove()：移除当前元素，在当前元素调用。
  22.        *
  23.        */
  24.       // 创建新的元素
  25.       const ul = document.createElement("ul");
  26.       //追加元素
  27.       document.body.append(ul);
  28.       for (let i = 0; i < 6; i++) {
  29.         const li = document.createElement("li");
  30.         //添加内容
  31.         li.append("item" + (i + 1));
  32.         //设置字号大小
  33.         li.style.fontSize = "30px";
  34.         //追加元素
  35.         ul.append(li);
  36.       }
  37.       console.log(ul);
  39.       //创建元素，添加内容，添加样式，获取第三个li,插入节点
  40.       const li = document.createElement("li");
  41.       li.append("new item");
  42.       li.style.color = "pink";
  43.       li.style.fontSize = "30px";
  44.       const item = document.querySelector("ul li:nth-of-type(3)");
  45.       item.before(li);
  46.       //克隆节点
  47.       const newNode = li.cloneNode(true);
  48.       item.after(newNode);
  49.       //节点替换
  50.       const newItem = document.createElement("li");
  51.       newItem.append("替换后的节点");
  52.       const oldItem = document.querySelector("ul li:last-of-type");
  53.       ul.replaceChild(newItem, oldItem);
  54.       //节点删除
  55.       const deleteItem = document.querySelector("ul li:first-of-type");
  56.       deleteItem.remove();
  57.     </script>
  59.     <script>
  60.       //insertAdjacentElement('插入位置'，元素)
  61.       //插入位置有四个
  62.       //afterBegin:开始标签之后，第一个子元素
  63.       //beforeBegin:开始标签之前，是它的前一个兄弟元素
  64.       //beforeEnd:结束标签之前，它的最后一个子元素
  65.       //afterEnd:结束标签之后，它的下一个兄弟元素
  67.       const h3 = document.createElement("h3");
  68.       h3.append("这是一个ul列表");
  70.       ul.insertAdjacentElement("beforeBegin", h3);
  72.       const insertItem = document.createElement("li");
  73.       insertItem.append("这是一个afterBegin");
  74.       ul.insertAdjacentElement("afterbegin", insertItem);
  76.       const insertItem2 = document.createElement("li");
  77.       insertItem2.append("这是一个beforeEnd");
  78.       ul.insertAdjacentElement("beforeEnd", insertItem2);
  80.       const h4 = document.createElement("h4");
  81.       h4.append("这是一个footer");
  82.       ul.insertAdjacentElement("afterEnd", h4);
  83.     </script>
  84.     <input type="text" name="message" id="message" onkeydown="addMessage(this)" palceholder="请输入留言" autofocus />
  85.     <ul class="list"></ul>
  86.     <script>
  87.       //2. 改写留言板案例, 添加自定义样式
  88.       let i = 0;
  89.       function addMessage(ele) {
  90.         if (event.key === "Enter") {
  91.           if (ele.value.length === 0) {
  92.             alert("留言不能为空");
  93.             ele.focus();
  94.             return false;
  95.           }
  97.           const ul = document.querySelector(".list");
  98.           const li = document.createElement("li");
  99.           //添加自定义属性
  100.           li.setAttribute("data-index", ++i);
  101.           //获取自定义属性
  102.           ele.value = "第" + li.dataset.index + "条: " + ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
  103.           li.innerHTML = ele.value;
  104.           //   console.log(li);
  105.           ul.insertAdjacentElement("afterbegin", li);
  106.           ele.value = null;
  107.         }
  108.       }
  110.       function del(ele) {
  111.         return confirm("要删除吗？") ? ele.remove() : false;
  112.       }
  113.     </script>
  114.   </body>
  115. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！