JavaScript简单留言板

主要是通过创建节点createElement，添加节点insertBefore，删除节点removeChild来达到目的

HTML样式

 <textarea name="" id="" ></textarea>
    <button>发布</button>
    <ul>
        <li></li>
    </ul>

CSS样式

textarea{
           width: 300px;
           height: 300px;
        }
        ul{
           
            list-style: none;
        }
        ul>li{
            background-color: pink;
            margin-top: 20px;
            width: 300px;
        }
        li>a{
            float:right;
        }

JS样式

  // 获取元素
        var text=document.querySelector("textarea");
        var btn=document.querySelector("button");
        var ul=document.querySelector("ul");

      //注册事件
      btn.onclick=function(){
          if(text.value==""){
              alert("请输入内容");
          }else{
             //   创建元素
          var li=document.createElement("li");
          li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
        //   添加元素
          ul.insertBefore(li,ul.children[0]);
        //   删除元素  删除的是当前链接的li 它的父亲
        var as=document.querySelectorAll("a");
        for(var i=0;i<as.length;i++){
            as[i].onclick=function(){
                // node.removeChild(child);删除的是li 当前a所在的li this.parentNode
                ul.removeChild(this.parentNode);
            }
        }
          }
       
      }