comment ajouter un nouveau <li> à <ul> en cliquant avec javascript

Comment ajouter un élément de liste à un ul existant à l'aide d'une fonction à partir d'un clic? J'en ai besoin pour ajouter à ce type de liste ...

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

... un autre élément de liste avec l'identifiant "element4" et le texte "Four" en dessous. J'ai essayé cette fonction mais ça ne marche pas ...

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

Je ne connais pas JQuery donc Javascript uniquement s'il vous plaît Merci!!

Vous n'avez pas ajouté votre lienfant à votre ulélément

Essaye ça

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

Si vous devez définir l'identifiant, vous pouvez le faire en

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

Ce qui transforme la fonction en

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

Vous y étiez presque:

Il vous suffit d'ajouter le lito ulet le tour est joué!

Alors ajoutez simplement

ul.appendChild(li);

à la fin de votre fonction donc la fonction de fin sera comme ceci:

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

Vous devez d'abord créer un li(avec l'ID et la valeur souhaités), puis l'ajouter à votre fichier 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)
}

Vérifiez cet exemple auquel ajouter un liélément ul.