[英]how to add new <li> to <ul> onclick with javascript
如何使用 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
的示例。
只需使用innerHTML
:
function function1() {
ul.innerHTML += `<li> four </li>`;
}
除了将li标签附加到ul之外,没有什么可添加到您的代码中
ul.appendChild(li)
然后你只需将它添加到你的函数中,然后它就可以工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.