如何将新的<li>添加到<ul>使用JavaScript单击

how to add new <li> to <ul> onclick with javascript

本文关键字：ul 使用 单击 JavaScript 添加 li      更新时间：2023-09-26

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

相关文章：