一个简单的留言板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      type="text"
      onkeydown="addMsg(this)"
      placeholder="请输入留言内容"
      autofocus
    />
    <ul class="list"></ul>
    <script>
      function addMsg(ele) {
        console.log(ele);
        console.log(event);
        if (event.key === "Enter") {
          const ul = document.querySelector(".list");
          if (ele.value.length === 0) {
            alert("can not null");
            ele.focus();
            return false;
          }
          const li = document.createElement("li");
          li.innerHTML =
            ele.value +
            "&nbsp&nbsp&nbsp<button onclick='del(this.parentNode)'>删除</button>";
          //   ul.append(li);
          ul.insertAdjacentElement("afterbegin", li);
          ele.value = null;
          ele.focus();
        }
      }
      function del(ele) {
        // if (confirm("真的要删？")) {
        //   ele.remove();
        //   // ele.outerHTML = null;   //这种方式也可以删除
        // }
        confirm("真的要删除？") ? ele.remove() : false;
      }
    </script>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

table标签用法

2021-12-23 16:56:17