简易发布留言案例

简易发布留言案例：

HTMl代码： 一个文本输入框，一个按钮以及一个ul

 <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
    </ul>

css代码： 简单美化一下

  * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 100px 200px;
        }

        li {
            color: red;
            background-color: pink;
            width: 400px;
            height: 20px;
            margin-top: 2px;
        }

        ul {
            padding-top: 2px;
        }
        
          a {
            float: right;
        }

js代码：

 <script>
        //1.获取元素
        var text = document.querySelector('#text');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //2.绑定事件
        btn.onclick = function () {
            //判断text输入框是否为空，为空则不生成
            if (text.value == '') {
                alert('你没有输入内容');
                return false;
            } else {

                //1.创建元素
                var li = document.createElement('li');  //创建li标签
                //将输入框里的文字赋值给li,并添加一个删除按钮
                //javaSccript:; 阻止链接跳转
                li.innerHTML = text.value + "<a href = 'javaScript:;' >删除<a/>";
                //2.添加元素
                ul.appendChild(li);   //创建的li放到ul中
                text.value = null;   //输入一遍后清空text里的内容
                //3.删除元素
                var a = document.querySelectorAll('a');
                for (let i = 0; i < ul.children.length; i++) {   //获取每一个a
                    a[i].onclick = function () {
                        ul.removeChild(this.parentNode)
                    }
                }
            }

        }
    </script>

效果图：