<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]);
            li.innerHTML=text.value; 
       }

If I change

var text=document.getElementById("text");

to

var text=document.getElementById("text").value;

then

li.innerHTML=text

will not get a value, but I can get the value If i remove the text and use

li.innerHTML=document.getElementById("text").value; 

why?