js实战之留言板

1.DOM操作之增删改

    <script>
      // 创建元素
      const ul = document.createElement("ul");
      // 追加元素
      document.body.append(ul);
      for (let i = 0; i < 10; i++) {
        const li = document.createElement("li");
        li.append("itme" + (i + 1));
        ul.append(li);
      }
      //   在某一个节点之前插入用before
      const li = document.createElement("li");
      li.append("新加内容");
      const itme = ul.querySelector("li:nth-of-type(5)");
      //   当前节点.before（新节点）
      itme.before(li);
      //   克隆
      let kl = li.cloneNode(true);
      itme.after(kl);
      ul.style.border = "3px solid";
      //  beforeBegin 开始标签之前
      const h3 = document.createElement("h3");
      h3.append("新加内容(beforeBegin)");
      ul.insertAdjacentElement("beforebegin", h3);
    //方法二
      ul.insertAdjacentHTML(
        "beforebegin",
        '<a href="xxx"style="color: red">新家方法二</a>'
      );
      //  afterBegin 开始标签后面，兄弟元素之前
      const h4 = document.createElement("h3");
      h4.append("新加内容(beforbegin)");
      ul.insertAdjacentElement("afterbegin", h4);
      //  beforeend 最后一个兄弟元素与标签之间
      const h5 = document.createElement("h3");
      h5.append("新加内容(beforeend)");
      ul.insertAdjacentElement("beforeend", h5);
      //  afterEnd  结束标签之后
      const h6 = document.createElement("h3");
      h6.append("新加内容(afterend)");
      ul.insertAdjacentElement("afterend", h6);
      //   replaceChild()替换
      // replaceChild(新节点,旧节点)
      const newNode = document.createElement("li");
      newNode.style.color = "red";
      newNode.append("替换的");
      const jiu = document.querySelector("li:first-of-type");
      ul.replaceChild(newNode, jiu);
      //删除元素
      //   remove
      newNode.remove();
      p.remove();
      p1.remove();
    </script>

2.留言板

   <input
      type="text"
      onkeydown="addMsg(this)"
      placeholder="留言"
      autofocus
      style="border: 1px solid; height: 50px"
    />
    <ul
      class="list"
      style="border: 2px solid; height: 200px; list-style-type: none"
    ></ul>
    <script>
      function addMsg(msg) {
        if (event.key === "Enter") {
          // <!-- 非空验证 -->
          if (msg.value.length === 0) {
            alert("留言不能为空!");
            msg.focus();
            return false;
          }
          // 添加留言
          //   const li = document.createElement("li");
          //   li.append(msg.value);
          const ul = document.querySelector(`.list`);
          //   ul.insertAdjacentHTML("afterbegin", `<li>${msg.value}</li>`);
          //   给留言添加删除功能
          msg.value =
            msg.value +
            '<button onclick="del(this.parentNode)" style="background:pink;border:none;">删除</button>';
          ul.insertAdjacentHTML(
            "afterbegin",
            `<li style="color:green;">${msg.value}</li>`
          );
          // 清空输入框
          msg.value = null;
        }
      }
      //   删除功能
      function del(msg) {
        if (confirm("是否删除?")) {
          msg.remove();
        }
      }
    </script>