cara menambahkan <li> baru ke <ul> onclick dengan javascript

Bagaimana cara menambahkan elemen daftar ke ul yang ada menggunakan fungsi dari onclick? Saya membutuhkannya untuk menambahkan ke jenis daftar ini ...

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

... item daftar lainnya dengan id "element4" dan teks "Four" di bawahnya. Saya mencoba fungsi ini tetapi tidak berhasil ...

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

Saya tidak tahu JQuery jadi tolong hanya Javascript. Terima kasih!!

Anda belum menambahkan Anda lisebagai anak ke ulelemen Anda

Coba ini

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

Jika Anda perlu menyetel id, Anda dapat melakukannya dengan

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

Yang mengubah fungsinya menjadi

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

Anda hampir sampai:

Anda hanya perlu menambahkan lito uldan voila!

Jadi tambahkan saja

ul.appendChild(li);

ke akhir fungsi Anda sehingga fungsi akhirnya akan seperti ini:

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

Pertama, Anda harus membuat li(dengan id dan nilai sesuai kebutuhan) lalu menambahkannya ke 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)
}

Periksa contoh ini yang menambahkan lielemen ke ul.