Как итеративно добавлять дочерние элементы в (например) a.

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

Если у меня есть JS-скрипт, который запускает что-то вроде этого несколько раз:

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

Текущие 2 элемента списка удаляются. Как мне добавить новые элементы li в ul, не теряя элементы текущего списка?

-1
CJamesEd 15 Окт 2021 в 19:56

3 ответа

Лучший ответ

В качестве аргумента для 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>
1
Manas Khandelwal 15 Окт 2021 в 17:02
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>
0
Alexey Zelenin 15 Окт 2021 в 17:02

Я думаю, вам нужно уточнить, что на самом деле делает ваш код, но я могу сказать, что 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)
0
PanRagon 15 Окт 2021 в 17:05