как добавить новое в 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 только пожалуйста. Спасибо!!

3 59
javascript html list

3 ответа:

вы не добавили свой 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);
}
120

сначала вы должны создать li(с идентификатором и значением, как вам требуется) затем добавьте его в свой ul.

код:

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.

7

Вы были почти там:

вам просто нужно добавить 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);
}
7