案例 - 简单版发布留言 - 《JavaScript》

案例分析：
(1)核心思路：点击按钮之后，就动态创建一个li，添加到ul里面。
(2)创建li的同时，把文本域里面的值通过li.innerHTML赋值给li。
(3)如果想要新的留言在后面显示，就用appendChild
(4)如果想要新的留言在前面显示，就用insertBefore

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <textarea></textarea>
        <button>发布</button>
        <ul></ul>
    </body>
    <script>
        //获取元素
        var btn=document.querySelector("button");
        var text=document.querySelector("textarea");
        var ul=document.querySelector("ul");
        //注册事件(鼠标点击事件)
        btn.onclick=function(){
            //先判断一下
            if (text.value=="") {
                alert("您没有输入内容");
                return false;
            }else{
                //创建节点元素
                var li=document.createElement("li");    
                //将文本域中输入的内容赋值给节点
                li.innerHTML=text.value;
                //添加节点元素(每次鼠标一点击，就往里面添加一个节点)
                ul.insertBefore(li,ul.children[0]);//把节点添加到最前面(最新留言)
            }
        }
    </script>
</html>