Почему forEach добавляет текст ко всем элементам массива, а добавление элемента происходит один раз

Рейтинг: 0Ответов: 1Опубликовано: 17.01.2023

const list = document.querySelector('.list');
const listItems = list.querySelectorAll('.list__item');
const simpleText = 'Text';
const simpleEl = document.createElement('span');

listItems.forEach(item => {
  item.innerText = simpleText;
  item.insertAdjacentElement('beforeend', simpleEl);
});
<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

Result:

<ul class="list">
        <li class="list__item">Text</li>
        <li class="list__item">Text</li>
        <li class="list__item">Text</li>
        <li class="list__item">Text<span></span></li>
</ul>
javascript foreach
Источник: Stack Overflow на русском

Ответы

▲ 0

Как я уже упомянул в комментариях, ваша ошибка в том, что вы пытаетесь запихнуть один и тот же спан одновременно в 4 элемента. Поэтому вам нужно либо клонировать исходный span и копию добавлять к содержимому li, либо каждый раз создавать новый span.

Пример:

const list = document.querySelector('.list');
const listItems = list.querySelectorAll('.list__item');
const simpleText = 'Text';

listItems.forEach(item => {
  item.innerText = simpleText;
  let simpleEl = document.createElement('span'); // каждый раз создаем новый спан, его и добавляем в li
  item.insertAdjacentElement('beforeend', simpleEl);
});
<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>