как добавить новый <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.