Loop insertBefore adding a div before each current DIV

Question

const len = document.getElementById('parent').children.length
for (let i = 0; i < len; i++) {
 const div =  document.createElement("div"); 
 document.getElementById('parent').insertBefore(div, document.getElementById('parent').children[i])
}

This code returns

What I am trying to achieve is to get an empty div before each current class

I can understand after inserting the first empty div, then the first empty div becomes the first child [0]. Is there a solution to achieve the goal? Thanks

user_3744304 · Answer

To solve the problem with the changing indexes, use a querySelectorAll('#parent div') and iterate over it using for..of instead of an index-based loop:

for (const child of document.querySelectorAll('#parent div')) {
  document.getElementById('parent').insertBefore(document.createElement("div"), child);
}

#parent div[class] {
  background-color: red;
  height: 4px;
}

#parent div:not([class]) {
  background-color: yellow;
  height: 4px;
}

user_1234087 · Answer

This is because while you are iterating on elements you are adding it and length changes:

1 - first loop you add a div at 0

2 - second loop element that was at 0 now it's at 1 and you add a div before it

3 - and so on...

Solution: foreach loop (used hr instead of div because is easier to view without styles)

Array.from(document.getElementById('parent').children).forEach( (item, index) => {
 const div =  document.createElement("hr"); 
 document.getElementById('parent').insertBefore(div, item)
})


  asfd
  xcbs
  msfd
  powg
  ksle

user_11129751 · Answer

This happens because document.getElementById('parent').children return a live collection of children and document.getElementById('parent').children[i] will always be

, so you must make a copy of document.getElementById('parent').children outside of the for loop:

const children = [...document.getElementById('parent').children];
for (let i = 0; i < children.length; i++) {
 const div =  document.createElement("div"); 
  div.innerHTML = i;
 document.getElementById('parent').insertBefore(div, children[i])
}


  asfd
  xcbs
  msfd
  powg
  ksle

Loop insertBefore adding a div before each current DIV

3 Answers