wie man <ul> <li> mit Javascript zu <ul> hinzufügt

Wie füge ich einer vorhandenen ul ein Listenelement hinzu, indem ich eine Funktion von einem Klick aus verwende? Ich brauche es, um diese Art von Liste hinzuzufügen ...

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

... ein weiteres Listenelement mit der ID "element4" und dem Text "Four" darunter. Ich habe diese Funktion ausprobiert, aber sie funktioniert nicht ...

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

Ich kenne JQuery nicht, also bitte nur Javascript. Vielen Dank!!

Sie haben Ihr liKind nicht an Ihr ulElement angehängt

Versuche dies

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

Wenn Sie die ID festlegen müssen, können Sie dies tun, indem Sie

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

Welches macht die Funktion 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);
}

Sie waren fast da:

Sie müssen nur das lian ulund voila anhängen !

Also einfach hinzufügen

ul.appendChild(li);

bis zum Ende Ihrer Funktion, damit die Endfunktion folgendermaßen aussieht:

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

Zuerst müssen Sie eine erstellen li(mit der gewünschten ID und dem gewünschten Wert) und diese dann zu Ihrer hinzufügen 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)
}

Überprüfen Sie dieses Beispiel , das ein liElement hinzufügt ul.