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

【问题标题】：How do I add child <li> elements to <ul> without removing current children如何在不删除当前子元素的情况下将子 <li> 元素添加到 <ul>
【发布时间】：2021-10-15 16:56:22
【问题描述】：

我如何迭代地将子元素添加到（例如）a 中。

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

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

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

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

【问题讨论】：

发布您的minimal reproducible example。

标签： javascript html appendchild

【解决方案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 += "&lt;li&gt;Item 3&lt;/li&gt;";

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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)

【讨论】：

好的，我可以发誓我尝试过这样做，但它会清除当前的列表项......但我只是在我的代码中尝试过它并且它有效。谢谢！！