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

... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...

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

我不知道 JQuery，所以只能用 Javascript。谢谢! ！

324598 次浏览
小开
最佳答案

You have not appended your li as a child to your ul element

试试这个

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

You were almost there:

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

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

Check this 例子 that add li element to ul.

小开

使用 innerHTML:

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

提交答案