Simple adding to list not working

Question

I have a simple script adding to a UL via a button but it's not working

<input type = "text" id ='textbox'/>
<button onclick="addPeople()">Add Players</button>
<ul id='myList'></ul>

<script>
function addPeople() {
    var text = document.getElementById("textbox").value; 
    var li = "<li>" + text + "</li>";
    document.getElementById("myList").appendChild(li);
}
</script>

can someone point me in the right direction?

Youo should search before posting. See this: http://stackoverflow.com/questions/17773938/add-a-list-item-through-javascriptand there are many others for you tyo reference. also see this:http://stackoverflow.com/help — M H, Jun 09 '15 at 00:22
This is not a valid node for appendChild, it's just a string. `var li = "

score 0 · Accepted Answer · answered Jun 09 '15 at 00:28

You can´t append a String as a Child to a List.
You have to create a new li-element and append it.
This should do the trick:

function addPeople() {
    var text = document.getElementById("textbox").value;
    var ul = document.getElementById("myList");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(text));
    ul.appendChild(li);
 }

score 0 · Answer 2 · answered Jun 09 '15 at 00:31

One way to make this work is to change

document.getElementById("myList").appendChild(li);

to

document.getElementById("myList").innerHTML += li;

because li is not a node, it is a string.

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node (ref).

If you want to append an HTML fragment (your string), you can use the method above. Demo

Simple adding to list not working

2 Answers2