我如何添加孩子<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)