如何使用javascript将新的<li>添加到<ul> onclick

Question

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

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

…另一个列表项，其 id 为“element4”，文本为“Four”。我试过这个功能，但它不起作用……

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

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

原文由 Uni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还没有将您的 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);
 }

原文由 gaurav5430 发布，翻译遵循 CC BY-SA 3.0 许可协议