Почему insertBefore только последнему элементу в коллекции?

Question

[Виктор Янышев]

Создаётся список, потом каждому элементу в списке необходимо вставить новый элемент, но почему вставка элемента происходит только в последний элемент.

var todo = {
                property: '',
                getAllItem: function () {
                        for(let i = 0;task.length > i; i++) {
                            let item = document.createElement('li');
                            item.classList.add('todo__item');
                            item.innerText = task[i].text;
                            item.setAttribute('data-item-id',i);
                            listing.appendChild(item);
                        }
                    },
                pasteControlItem: function () {
                    let control = document.createElement('i');
                    control.setAttribute('aria-hidden', 'true');
                    control.classList.add('fa');
                    control.classList.add('fa-circle-thin');
                    let item = document.querySelectorAll('.todo__item');
                    for (let i = 0; i < item.length; i++) {
                        item[i].insertBefore(control, item[i].childNodes[0]);
                    }
                }
      };

Результат (а надо что бы li > i + #text во всех li):

<ul class="todo__list">
        <li class="todo__item" data-item-id="0">Learn HTML &amp; CSS</li>
        <li class="todo__item" data-item-id="1">Learn JavaScript</li>
        <li class="todo__item" data-item-id="2">Learn EcmaScript</li>
        <li class="todo__item" data-item-id="3">Learn VueJS</li>
        <li class="todo__item" data-item-id="4">Learn Webpack</li>
        <li class="todo__item" data-item-id="5">Learn React</li>
        <li class="todo__item" data-item-id="6"><i aria-hidden="true" class="fa fa-circle-thin"></i>Learn Unit Testing</li>
</ul>

Answer 1

[Дмитрий Беляев]

Для каждой вставки нужно создавать новый элемент:

pasteControlItem: function () {
   let item = document.querySelectorAll('.todo__item');
   for (let i = 0; i < item.length; i++) {
      let control = document.createElement('i');
      control.setAttribute('aria-hidden', 'true');
      control.classList.add('fa');
      control.classList.add('fa-circle-thin');
      item[i].insertBefore(control, item[i].childNodes[0]);
   }
}

А вот так будет работать быстрее:

pasteControlItem: function () {
  let item = document.querySelectorAll('.todo__item');
  for (let i = 0; i < item.length; i++) {
    item.insertAdjacentHTML('afterBegin', '<i aria-hidden="true" class="fa fa-circle-thin"></i>');
  }
}

Comments

[Виктор Янышев]

Примного благодарен! Надо было мне внимательней перечитать всю функцию, а то я упёрся в цикл.