DOM ------ 简易留言功能

    //html代码
    <textarea placeholder="留言内容..."></textarea>
      <button>发布</button>
      <ul>
          <li>留言板</li>
      </ul>
      //js代码
      // 1.获取元素
        var btn = document.querySelector('button')
        var text = document.querySelector('textarea')
        var ul = document.querySelector('ul')
        // 2.注册事件
        btn.onclick = function() {
            if(text.value == ''){
                alert('您没有输入内容!')
                return false
            }else{
                // (1).创建元素
                var li = document.createElement('li')
                // 先有li 才能赋值
                // javascript:; 用来阻止页面跳转
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
                // (2).添加元素
                // ul.appendChild(li)
                ul.insertBefore(li,ul.children[0])
                // (3).删除元素 删除的是当前链接的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)
                    }
                }
            }
        }