一个简单的留言板

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <input
  11.       type="text"
  12.       onkeydown="addMsg(this)"
  13.       placeholder="请输入留言内容"
  14.       autofocus
  15.     />
  16.     <ul class="list"></ul>
  17.     <script>
  18.       function addMsg(ele) {
  19.         console.log(ele);
  20.         console.log(event);
  21.         if (event.key === "Enter") {
  22.           const ul = document.querySelector(".list");
  23.           if (ele.value.length === 0) {
  24.             alert("can not null");
  25.             ele.focus();
  26.             return false;
  27.           }
  28.           const li = document.createElement("li");
  29.           li.innerHTML =
  30.             ele.value +
  31.             "&nbsp&nbsp&nbsp<button onclick='del(this.parentNode)'>删除</button>";
  32.           //   ul.append(li);
  33.           ul.insertAdjacentElement("afterbegin", li);
  35.           ele.value = null;
  36.           ele.focus();
  37.         }
  38.       }
  40.       function del(ele) {
  41.         // if (confirm("真的要删？")) {
  42.         //   ele.remove();
  43.         //   // ele.outerHTML = null;   //这种方式也可以删除
  44.         // }
  45.         confirm("真的要删除？") ? ele.remove() : false;
  46.       }
  47.     </script>
  48.   </body>
  49. </html>