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

【问题标题】：how to add new <li> to <ul> onclick with javascript如何使用javascript将新的<li>添加到<ul> onclick
【发布时间】：2014-01-07 13:33:19
【问题描述】：

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

【问题讨论】：

标签： javascript html list

【解决方案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);
}

【讨论】：

【解决方案2】：

你快到了：

您只需将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);
}

【讨论】：

【解决方案3】：

首先，您必须创建一个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)
}

检查此example 将li 元素添加到ul。

【讨论】：