简单动态留言板的创建

效果图展示：

思路

html代码

 <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发表留言</button>
    <ul></ul>

css代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 100px;
        }
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            outline: none;
            resize: none;
        }
        ul {
            margin-top: 50px;
        }
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        li a {
            float: right;
            width: 40px;
            height: 20px;
            text-align: center;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ccc;
            color: #000;
        }
    </style>

js代码

<script>
    //点击按钮之后 就动态创建一个li  添加到ul里面
    //创建li的同时  把文本域里面的值通过li.innerHTML赋值给li

    //获取元素
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    //创建事件
    btn.onclick = function () {
        if (text.value == '') {
            return false;
        } else {
            //1.创建li
            var li = document.createElement('li');
            //先有li 再赋值   
            li.innerHTML = text.value + '<a href="javascript:;">删除</a>';

            //2.添加li
            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(){
                    // 删除当前a的父亲li   li的父亲是ul   
                    //删除节点语法  父节点.removeChild(子节点)
                    ul.removeChild(this.parentNode);
                }
            }
        }
    }
</script>