如何在不删除当前子项的情况下将子 <li> 元素添加到 <ul>

Question

如何将子元素迭代添加到（例如）a .

<ul id="my-list">
   <li>item 1</li>
   <li>item 2</li>
</ul>

如果我有一个 JS 脚本多次运行这样的东西：

document.getElementById('my-list').appendChild('someListItemICreated')

当前的 2 个列表项已删除。如何在不丢失当前列表项目的情况下向 ul 添加新的 li 项目？

Answer 1

您需要提供一个元素作为 appendChild 的参数，而不是字符串。像这样：

const li = document.createElement("li");
li.innerText = "Item 3";
document.getElementById("my-list").appendChild(li);

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

在大多数情况下，我更喜欢更简单、更简洁的方法是：

document.getElementById("my-list").innerHTML += "<li>Item 3</li>";

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Answer 2

const c = document.createElement('li');
c.innerText = 'item 3';
document.getElementById('my-list').appendChild(c);

<ul id="my-list">
   <li>item 1</li>
   <li>item 2</li>
</ul>

Answer 3

我认为您需要更具体地说明您的代码实际在做什么，但我可以说 someListItemICreated 不应该是一个字符串，如果这是您传递的字符串。这是我制作的一个示例，它与您所指的运行良好。

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

let someListItemICreated = document.createElement("li");
someListItemICreated.appendChild(document.createTextNode("item 3"));

document.getElementById("my-list").appendChild(someListItemICreated)

如何在不删除当前子项的情况下将子 <li> 元素添加到 <ul>

How do I add child <li> elements to <ul> without removing current children

html

javascript

appendchild