简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > dom增删改 留言板案例
Blogger Information
Blog 36
fans 1
comment 0
visits 26102
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
dom增删改 留言板案例
早晨
Original
463 people have browsed it
序号 名称 描述
1 document.createElement() 创建元素节点对象：可以创建一个元素节点对象，它需要一个标签名作为参数，根据该标签名创建元素节点，并将创建好的对象作为返回值返回
2 document.createTextNode() 创建一个文本节点：可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据文本内容创建文本节点，并将新的节点返回，appendChild()向一个父节点中添加一个子节点，语法： 父节点.appendChild(子节点)
3 insertBefore() 插入一个节点：可以在指定子节点前插入新的子节点， 语法：父节点.insertBefore(新节点,旧节点);
4 replaceChild() 替换一个节点：可以使用指定子节点替换已有子节点，语法：父节点.replaceChild(新节点,旧节点);
5 removeChild() 删除一个子节点。 语法：父节点.removeChild(子节点);子节点.parentNode.removeChild(子节点);

dom增删改代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.       // 创建元素 createElement()
  12.       const ul = document.createElement("ul");
  13.       // 追加元素: append()
  14.       document.body.append(ul);
  16.       for (let i = 0; i < 7; i++) {
  17.         const li = document.createElement("li");
  18.         li.append("item-" + (i + 1));
  19.         ul.append(li);
  20.       }
  22.       console.log(ul);
  24.       const li = document.createElement("li");
  25.       li.append("new item");
  26.       li.style.color = "red";
  27.       const item = ul.querySelector("li:nth-of-type(3)");
  28.       item.before(li);
  30.       // 克隆
  31.       let newNode = li.cloneNode(true);
  32.       item.after(newNode);
  33.       const h3 = document.createElement("h3");
  34.       h3.append("列表");
  35.       ul.insertAdjacentElement("beforebegin", h3);
  36.       ul.insertAdjacentHTML("afterend", "<h4>共计: 8个</h4>");
  38.       // remove: 移除
  39.       ul.firstElementChild.remove();
  40.       //   ul.lastElementChild.remove();
  41.       //   ul.querySelector("li:nth-of-type(3)").remove();
  42.       //   ul.querySelector("li:nth-of-type(4)").remove();
  43.     </script>
  44.   </body>
  45. </html>

运行效果

留言板实例代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <input
  11.       type="text"
  12.       onkeydown="book(this)"
  13.       placeholder="请输入留言"
  14.       autofocus
  15.     />
  16.     <ul class="list"></ul>
  18.     <script>
  19.       function book(bbs) {
  20.         if (event.key === "Enter") {
  21.           if (bbs.value.length === 0) {
  22.             alert("留言不能为空");
  23.             bbs.focus();
  24.             return false;
  25.           }
  26.           const ul = document.querySelector(".list");
  27.           bbs.value =
  28.             bbs.value + '<button onclick="del(this.parentNode)">删除</button>';
  29.           ul.insertAdjacentHTML("afterbegin", `<li>${bbs.value}</li>`);
  30.           bbs.value = null;
  31.         }
  32.       }
  34.       function del(bbs) {
  35.         return confirm("是否删除?") ? bbs.remove() : false;
  36.       }
  37.     </script>
  38.   </body>
  39. </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！