如何使用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);
}

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

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

检查这个添加元素的示例.liul

Answer 4

只需使用innerHTML：

function function1() {
  ul.innerHTML += `<li> four </li>`;
}