javascript - 如何使用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。谢谢!!

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