Почему forEach добавляет текст ко всем элементам массива, а добавление элемента происходит один раз
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>
Ответы (1 шт):
Автор решения: rusgeli
→ Ссылка
Как я уже упомянул в комментариях, ваша ошибка в том, что вы пытаетесь запихнуть один и тот же спан одновременно в 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>