如何添加新的<；李>；至<；ul>；用javascript单击onclick

如何使用onclick中的函数向现有ul添加列表元素？我需要它添加到这类列表中

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

---

我不知道JQuery，所以请只使用Javascript。谢谢

您没有将您的

li

作为孩子附加到

ul

元素中

试试这个

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

如果需要设置id，可以通过

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

（根据需要使用id和值），然后将其添加到您的

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

除了将li标记添加到ul

ul.appendChild(li)

---

您只需将此添加到您的函数中，它就应该可以工作。

请尽量不要重复其他答案，或者解释您的答案与已接受的答案相比有哪些不同和/或更好的地方。

ul.appendChild(li)