简易留言板功能实现

1.创建HTML元素

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

2.获取页面元素

        var text = document.querySelector('textarea'); //获取文本域
        var btn = document.querySelector('button'); //获取发布按钮
        var ul = document.querySelector('ul'); //获取空列表ul

3.代码实现留言发布功能

btn.onclick = function() { //创建按钮点击时间
            if (text.value == '') { //对文本域内容进行判定是否为空
                alert('不能发布空内容');
                return false //空内容执行中断
            } else {
                var li = document.createElement('li') //创建li元素
                li.innerHTML = text.value; //将文本域内容赋值给新建的li
                ul.insertBefore(li, ul.children[0]) //将新建的li元素放在最前面
            }
        }

4.效果