如何使用 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和值),然后将其添加到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>`;
}
Object.assign
可以直接设置<li>
元素的textContent
(和id
),返回值可以传递给Element#append
将列表项添加到无序列表中。
ul.append(Object.assign(document.createElement('li'), {textContent: 'Element 4'}));
完整示例:
const ul = document.getElementById('list');
document.querySelector('button').addEventListener('click', e => {
ul.append(Object.assign(document.createElement('li'),
{textContent: 'Four', id: 'element4'}));
}, {once: true});
<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul>
<button>Add item</button>