从0到1学JS：10行js实现留言板

Hello，兄弟们，今天是用js代码完成一个留言板的小deomo，并实现留言从前面插入，虽然代码只有10行但也有个小坑，话不多说，直接上代码

HTML代码
<div>
    <textarea></textarea>
    <button>提交</button>
</div>
<ul>
</ul>

JS代码
        var btn = document.querySelector("button")
        var textarea = document.querySelector("textarea")
        var ul  = document.querySelector("ul")
    
        btn.onclick = function(){
           if(textarea.value == ''){
            alert("你输入的内容为空")
           }else{
            var li = document.createElement("li")
            li.innerHTML = textarea.value
            ul.insertBefore(li,ul.children[0])
           }
        }


 CSS代码
textarea {
    height: 100px;
}
div{
    position: relative;    
    left: 20%;
    
}
button {
    position: absolute;
    bottom: 5px;

}

代码结果

遇到的坑就是当你创建一个新的元素节点时，在哪里创建都可以，但如果在按钮点击事件触发的函数外面声明创建时，那你再用insertBefore（）这个方法添加节点元素时就只能添加一次，而在按钮里面创建元素就会每点击一次按钮，就会创建一个新的元素。

思考：难道每次createElement（）方法创建完节点之后就会销毁吗，还是说创建的元素只能用一次？我个人倾向于元素只能用一次，至少在通过insertBefore（）往元素前面插入时是这样的。因为js是脚本语言，除了声明提前，js是一行一行执行的，如果是像局部作用域那样，用完变量被垃圾回收，应该不太可能。