JS（javascript）节点操作案例：利用节点操作的创建、删除、添加；制作简易的留言板

在指定位置输入内容，点击按钮自动创建一个节点生成自己所输入的内容，并且可以选择性删除

效果图展示

css部分

body部分

  <textarea cols="30" rows="10" placeholder="想说点什么...">textarea>
    <button>留言button>
    <div>留言区div>
    <ul>

    ul>

js部分

 <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value == '') {
                alert('不能给空的留言哟')
                return false;
            } else {
                //创建元素
                var li = document.createElement('li');
                li.innerHTML = text.value + " 删除";//javascript:;阻止链接跳转
                ul.insertBefore(li, ul.children[0]);//在当前元素前生成新的li
                text.value = '';
                //删除元素  删除的是当前连接a  需要删除的是他父亲li
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //node.removechildren(children)  删除的是li  当前a所在的li  this.parentnode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>