come aggiungere nuovo <li> a <ul> onclick con javascript

Come si aggiunge un elemento di un elenco a un ul esistente utilizzando una funzione da un clic? Ne ho bisogno per aggiungere a questo tipo di elenco ...

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

... un altro elemento della lista con l'id "element4" e il testo "Four" sotto. Ho provato questa funzione ma non funziona ...

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

Non conosco JQuery quindi solo Javascript per favore. Grazie!!

Non hai aggiunto il tuo lida bambino al tuo ulelemento

Prova questo

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

Se hai bisogno di impostare l'id, puoi farlo da

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

Che trasforma la funzione in

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);
}

Eri quasi arrivato:

Hai solo bisogno di aggiungere il lia ule voilà!

Quindi aggiungi

ul.appendChild(li);

alla fine della tua funzione in modo che la funzione di fine sarà così:

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

Per prima cosa devi creare un li(con id e valore come richiesto) quindi aggiungerlo al tuo file ul.

Javascript ::

addAnother = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}

Controlla questo esempio che aggiunge l' lielemento a ul.