【JS】元素操作实战：todoList：留言板

元素操作实战：todoList：留言板

关键思路：
使用 Insertadjacenthtml Api 直接添加到 Ul标签的后面即可

<!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>todoList：留言板</title>
  </head>
  <body>
    <input
      type="text"
      onkeydown="insertComment(this)"
      placeholder="请输入留言"
      autofocus
    />
    <ul class="list"></ul>
    <script>
      const insertComment = function (ele) {
        // console.log(ele)
        //任何事件方法中，都有一个事件对象可以直接使用
        //event
        //console.log(event.key)//获取输入按键
        if (event.key === 'Enter') {
          //1.判断非空
          if (ele.value.length === 0) {
            alert('留言不能为空');
            //重置焦点
            ele.focus();
            //直接返回
            return false;
          }
          //2.添加元素
          //   console.log(ele.value);
          //   //创建一个新元素来保存留言
          //   const li = document.createElement('li');
          //   li.append(ele.value);
          //   ul = document.querySelector('.list');
          //   if(ul.firstElementChild != null){
          //     //将留言插入到第一条之前，确保最新留言在最上面
          //     ul.firstElementChild.before(li);
          //   } else {
          //     ul.append(li);
          //   }
          //使用 insertAdjacentHTML API 直接添加到 ul标签的后面即可
          const ul = document.querySelector('.list');
          ele.value += `<button onclick="del(this.parentNode)">删除</botton>`
          ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);
          //3.清空输入框
          ele.value = null;
        }
      };
      const del = function(ele){
        //alert只有确认按钮
        //alert('留言将被删除！')
        //confirm：有确认和取消按钮
        confirm('是否删除?')? ele.remove : false;
        //ele.remove();
        //ele.outerHTML = null //作用同上
      }
    </script>
  </body>
</html>

元素操作实战：todoList：留言板

相关文章