留言板第二种方法

HTML代码

 <div>
    <textarea name="" id="tas" cols="30" rows="10"></textarea>
    <br>
    <input type="button" value="提交">
    <ul>  </ul>
    </div>

      
        div>textarea{
          width: 500px;
          height: 100px;
        }
         div>ul>li{
          height: 35px;
          line-height: 35px;
          border-bottom: 1px solid gray;
          margin-top: 10px;
        }
        div>ul>li>a{
          float: right;
        }  

JS代码

  //获取元素
   let tas=document.querySelector('#tas');
   let int=document.querySelector('input');
   let uls=document.querySelector('ul');
    let lis=document.querySelector('ul li'); 
    //给input绑定点击事件 
    int.onclick=function(){
      //获取当前时间存放到textarea文本域里面
      let times=tas.value + new Date().toLocaleString();
      //判断tas.value==''值是空的时候
      if(tas.value==''){
        //把输入的文本返回tas.value==''
        alert('请输入内容');
        return
      }
      //用字符串将时间和a标签内容串联
      times=times+'<a href="javascript:;">删除</a>';
      //创建一个li元素
     let li=document.createElement('li');
     //将times内容放入li文本里面
     li.innerHTML=times;
     //获取ul元素
    let ul=document.querySelector('ul')
    //通过索引把li插入ul
     ul.insertBefore(li,ul.children[0]);
    }     
   //绑定监听事件
     uls.addEventListener('click',function(e){
      //我们通过a标签获得父级li标签 e.target.parentNode 
      let delli=e.target.parentNode;
      //点击删除当前的li
      this.removeChild(delli)
     })

效果图