如何使用 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);
到您的函数的末尾，因此结束函数将是这样的：
function function1() {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Element 4"));
ul.appendChild(li);
}
首先，您必须创建一个li（根据需要使用 id 和 value），然后将其添加到您的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)
}
检查这个例子是添加li元素ul。