javascript ile <ul> onclick'e nasıl yeni <li> eklenir

Bir onclick'teki bir işlevi kullanarak mevcut bir ul'ye nasıl liste öğesi eklerim? Bu tür bir listeye eklemek için ona ihtiyacım var ...

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

... "element4" kimliğine sahip başka bir liste öğesi ve altında "Dört" metni. Bu işlevi denedim ama çalışmıyor ...

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

JQuery bilmiyorum, bu yüzden sadece Javascript lütfen. Teşekkür ederim!!

Öğenizi liçocuk olarak ulelementinize eklemediniz

Bunu dene

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

Kimliği ayarlamanız gerekiyorsa, bunu şu şekilde yapabilirsiniz:

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

İşlevi dönüştüren

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

Neredeyse oradaydın:

Sadece eklemek gerekir lietmek ulve işte!

Yani sadece ekle

ul.appendChild(li);

işlevinizin sonuna kadar, böylece bitiş işlevi şöyle olacaktır:

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

Önce bir li(gerekli kimlik ve değer ile) oluşturmanız ve ardından bunuul .

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

Öğesine eleman ekleyen bu örneği kontrol edin .liul