初学第十九章：DOM操作之增删改查/仿制简易留言板

DOM操作之增删改

• 效果截图：

      /* * 1. createElement(ele): 创建新元素, document上调用
       * 2. append(string/ele): 追加到父级最后子节点后,在父节点上调用
       * 3. before(string/ele): 在某元素之前插入节点, 在当前元素上调用
       * 4. after(string/ele): 在某元素之后插入节点, 在当前元素上调用
       * 5. cloneNode(true): 克隆节点(true:包含子节点),在要被克隆的节点上调用
       * 6. replaceChild(ele,pos):  替换子元素,在父级节点上调用
       * 7. remove(ele): 移除元素 谁用删谁*/

      //createElement()：创建新元素 在当前文档document上调用
      //创建一个ul元素
      const ul = document.createElement("ul");
      //    将ul追加到body中
      document.body.append(ul);
      //使用循环添加五个li
      for (let i = 0; i < 5; i++) {
        //创建一个li元素
        const li = document.createElement("li");
        // 将li追加到ul中
        ul.append(li);
        // 追加文本内容到li里
        li.append("item" + (i + 1));
      }

      //添加一个新元素到item2前面
      const li = document.createElement("li");
      li.append("新节点");
      li.style.color = "red";
      let item = document.querySelector("li:nth-of-type(2)");
      // 在某个元素节点上调用传的是要插入的值
      item.before(li);

      //添加一个新元素到item3后面
      const li1 = document.createElement("li");
      li1.append("新节点");
      li1.style.color = "blue";
      let item1 = document.querySelector("li:nth-of-type(4)");
      //    在某个元素节点上调用传的是要插入的值
      item1.after(li1);

      //克隆元素
      //   cloneNode:在要被克隆的元素节点上调用
      const li3 = li1.cloneNode(true);
      let item2 = document.querySelector("li:last-of-type");
      item2.before(li3);

      //修改元素
      //   replaceChild：修改对应的节点 用新节点替换就节点 在父节点上调用
      const newNode = document.createElement("li");
      newNode.style.color = "red";
      newNode.append("替换的");
      const jiu = document.querySelector("li:first-of-type");
      ul.replaceChild(newNode, jiu);

      //   insertAdjacentElement(插入位置，元素);
      // 插入位置有四个
      // afterBegin: 起始标签后面
      // beforeBegin: 起始标签前面
      // afterEnd: 结束标签后面
      // beforeEnd: 结束标签之前

      //   在ul前面插入一个大标题
      const p = document.createElement("h3");
      p.append("标题");
      ul.insertAdjacentElement("beforebegin", p);
      //在ul之后插入大标题
      const p1 = document.createElement("h3");
      p1.append("标题");
      ul.insertAdjacentElement("afterend", p1);

      //删除元素
      //   remove
      newNode.remove();
      p.remove();
      p1.remove();

留言板

• 实例演示
  

    <div>
      <input type="" onkeydown="ly(this)" placeholder="请输入留言" autofocus />
      <ul class="list"></ul>
    </div>
    <script>
      const input = document.querySelector("input");
      input.style.border = "none";
      input.style.outline = "none";
      input.style.background = "#ccc";
      let width = window.getComputedStyle(input).width;
      width = parseInt(width);
      input.style.width = 200 + "px";
      let height = window.getComputedStyle(input).height;
      height = parseInt(height);
      input.style.height = 30 + "px";
      input.style.borderRadius = "20px";
      input.style.padding = "5px";
      const ul = document.querySelector("ul");
      ul.style.listStyle = "none";
      function ly(e) {
        if (event.key == "Enter") {
          // 1.拿到留言板的内容 判断是否为空
          if (!e.value) {
            alert("不能为空");
            return false;
            e.foucs();
          } else {
            //   2.将内容显示到页面中
            const ul = document.querySelector(".list");
            const li = document.createElement("li");

            let neirong = `<li style="color:red">${e.value}<button class="shanchu" onclick="del(this.parentNode)" style="margin-left:50px;width:50px border-radius:10px ; background:red ; color:#fff" >删除</button></li>`;
            ul.insertAdjacentHTML("afterbegin", neirong);
            // 3.清空输入框
            e.value = null;
          }
        }
      }
      function del(ele) {
        confirm("是否删除？") ? ele.remove() : false;
      }
    </script>