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

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

您尚未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);

到函数的末尾，因此end函数将如下所示：

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

检查将元素添加到的示例。liul