Ошибка с кодом addEventListener

Question

Я пытаюсь изучить чистый Javascript вместо jQuery только для того, чтобы овладеть тем, что происходит. Я не знаю, почему этот фрагмент кода не работает. Он должен добавить элементы в список при нажатии кнопки Добавить элемент

ссылки на скрипку: http://jsfiddle.net/kboucheron/XVq3n/

<input type="text" placeholder ="Add List" id="listItem"/> 
<button id="addButton">add Item</button> 
<div id="output"></div> 

<script> 
text = document.getElementById('listItem').value; 
addButton = document.getElementById('addButton'); 

addButton.addEventListener("click", function(e) { 
addItem = document.getElementById('output'); 
     addItem.appendChild(text); 
}); 
</script> 

Answer 1

addButton.addEventListener("click", function(e) { 
    var text = document.getElementById('listItem').value, 
     addItem = document.getElementById('output'); 
    addItem.appendChild(document.createTextNode(text)); 
}); 

http://jsfiddle.net/DerekL/XVq3n/2/

Кстати, вы должны переместить text декларации в click прослушиватель событий.