HTML中textarea中value属性获取值的问题?

    <textarea name="" id="text" name="text" ></textarea>
    <button value="123">发布</button>
    <ul>

    </ul>
    <script>  
       var button=document.querySelector("button");
       var text=document.getElementById("text");
       var ul=document.querySelector("ul");
       button.onclick=function(){
            var li=document.createElement("li");
            ul.insertBefore(li,ul.children[0]);
            //innerHtml标签中可以添加HTML标签;
            li.innerHTML=text.value; 
       } 

在javascript中我用 var text=document.getElementById("text"); 修改成为
var text=document.getElementById("text").value;然后把li.innerHTML=text.value; 修改成li.innerHTML=text;这样的话是得不到textarea的值,
但是我去掉var text 这一行,直接li.innerHTML=document.getElementById("text").value; 可以得到值,搞不懂这是为什么.

       var button=document.querySelector("button");
       var text=document.getElementById("text");
       var ul=document.querySelector("ul");
    这些要放在函数代码内，才可以得到，否则这些代码在最初网页加载的时候被执行。

加上日志运行看控制台输出，你就清楚了

var text=document.getElementById("text").value;
console.log("*****text="+text);      

document.getElementById("text")获取的是textarea对象
document.getElementById("text").value获取的是textarea的值

值在开始未输入前没有，只在输入后才有