how to add new <li> to <ul> onclick with javascript

Question

How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...

<ul id="list"> <li id="element1">One</li> <li id="element2">Two</li> <li id="element3">Three</li> </ul>  

... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...

function function1() {   var ul = document.getElementById("list");   var li = document.createElement("li");   li.appendChild(document.createTextNode("Element 4")); } 

I don't know JQuery so Javascript only please. Thank you!!

Answer 1

You have not appended your li as a child to your ul element

Try this

function function1() {   var ul = document.getElementById("list");   var li = document.createElement("li");   li.appendChild(document.createTextNode("Four"));   ul.appendChild(li); } 

If you need to set the id , you can do so by

li.setAttribute("id", "element4"); 

Which turns the function into

function function1() {   var ul = document.getElementById("list");   var li = document.createElement("li");   li.appendChild(document.createTextNode("Four"));   li.setAttribute("id", "element4"); // added line   ul.appendChild(li);   alert(li.id); } 

Answer 2

You were almost there:

You just need to append the li to ul and voila!

So just add

ul.appendChild(li); 

to the end of your function so the end function will be like this:

function function1() {   var ul = document.getElementById("list");   var li = document.createElement("li");   li.appendChild(document.createTextNode("Element 4"));   ul.appendChild(li); }