简单留言板案例(html-JavaScript节点操作-留言增加删除createElement-removeChild)

留言板案例

<textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 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{
            // 创建元素
            var li = document.createElement('li')
            // 把输入内容赋值到新的元素
            li.innerHTML = text.value + "<a href='#'>删除</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(){
                    ul.removeChild(this.parentNode)
                }
            }
        }
    </script>