insertBefore отрабатывает только с первым элементом итерации

Question

Нужна помощь спецов! Просидел пять часов, перепробовал много всяких вариантов, но решения так и не нашел.

let text = document.createTextNode('link: ');
let span = document.createElement('span');
span.appendChild(text);
        
let parNodes = document.querySelectorAll('p > a');
for (let i = 0; i < parNodes.length; i++) {
  console.log(parNodes[i].parentElement);
  parNodes[i].parentElement.insertBefore(span, parNodes[i])
};

<p><a href="http://www.google.be" name="google">www.google.be</a></p>    
<p><a href="http://www.hbvl.be" name="hbvl">www.hbvl.com</a></p>

По задумке текст "Link" должен добавляться перед каждой ссылкой, но у меня insertBefore срабатывает только на одной.

введите сюда описание изображения

Answer 1

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

let parNodes = document.querySelectorAll('p > a');
for (let i = 0; i < parNodes.length; i++) {
  let text = document.createTextNode('link: ');
  let span = document.createElement('span');
  span.appendChild(text);
  console.log(parNodes[i].parentElement);
  parNodes[i].parentElement.insertBefore(span, parNodes[i])
};

<p><a href="http://www.google.be" name="google">www.google.be</a></p>    
<p><a href="http://www.hbvl.be" name="hbvl">www.hbvl.com</a></p>

БЛОГ НА HUSL

insertBefore отрабатывает только с первым элементом итерации

Ответы (1 шт):