як додати новий <li> до <ul> onclick за допомогою javascript

Як додати елемент списку до існуючого ul за допомогою функції onclick? Мені потрібно, щоб додати до цього типу списку ...

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

... інший пункт списку з ідентифікатором "element4" та текстом "Four" під ним. Я спробував цю функцію, але вона не працює ...

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

Я не знаю JQuery, тому Javascript лише будь ласка. Дякую!!

Ви не додали своїх liдітей у дитинстві до своєї ulстихії

Спробуйте це

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

Якщо вам потрібно встановити ідентифікатор, ви можете зробити це до

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

Що перетворює функцію на

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

Ви майже були там:

Вам просто потрібно додати liдо ulі вуаля!

Тож просто додайте

ul.appendChild(li);

до кінця вашої функції, тому кінцева функція буде виглядати так:

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

Спочатку вам потрібно створити li(з ідентифікатором та значенням, як вам потрібно), а потім додати його до вашого 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)
}

Перевірте цей приклад, який додає liелемент до ul.