Before each existing DIV in a loop, a new div is inserted using the insertBefore

Question

Before each existing DIV in a loop, a new div is inserted using the insertBefore

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])
}

<div id="parent">
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

The output of this code is as follows:

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

The goal here is to insert an empty div before each existing class.

<div id="parent">
  <div></div>
  <div class="asfd"></div>
  <div></div>
  <div class="xcbs"></div>
  <div></div>
  <div class="msfd"></div>
  <div></div>
  <div class="powg"></div>
  <div></div>
  <div class="ksle"></div>
</div>

After inserting the first empty div, it becomes the first child [0]. Is there a way to achieve the desired outcome? Thank you!

javascript

Answer 1

Answer №1

One reason for this behavior is that while iterating through elements, you are adding new ones which cause the length of the array to change:

1 - In the first loop, you add a div at index 0

2 - In the second loop, the element that was originally at index 0 is now at index 1 and you add a div before it

3 - This pattern continues...

Solution: Use a foreach loop (I used hr instead of div for better visibility without styles)

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

<div id="parent">
  <div class="asfd">asfd</div>
  <div class="xcbs">xcbs</div>
  <div class="msfd">msfd</div>
  <div class="powg">powg</div>
  <div class="ksle">ksle</div>
</div>

Answer 2

One reason for this behavior is that while iterating through elements, you are adding new ones which cause the length of the array to change:

1 - In the first loop, you add a div at index 0

2 - In the second loop, the element that was originally at index 0 is now at index 1 and you add a div before it

3 - This pattern continues...

Solution: Use a foreach loop (I used hr instead of div for better visibility without styles)

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

<div id="parent">
  <div class="asfd">asfd</div>
  <div class="xcbs">xcbs</div>
  <div class="msfd">msfd</div>
  <div class="powg">powg</div>
  <div class="ksle">ksle</div>
</div>

Answer 3

Answer №2

To address the issue of changing indexes, consider utilizing a querySelectorAll('#parent div') and looping through it using for..of rather than relying on 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;
}

<div id="parent">
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

Answer 4

To address the issue of changing indexes, consider utilizing a querySelectorAll('#parent div') and looping through it using for..of rather than relying on 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;
}

<div id="parent">
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

Answer 5

Answer №3

This occurrence is due to the fact that

document.getElementById('parent').children

gives back a live collection of children, and

document.getElementById('parent').children[i]

will forever be

<div class="asfd"></div>

. Therefore, it is necessary to create a duplicate 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])
}

<div id="parent">
  <div class="asfd">asfd</div>
  <div class="xcbs">xcbs</div>
  <div class="msfd">msfd</div>
  <div class="powg">powg</div>
  <div class="ksle">ksle</div>
</div>

Answer 6

This occurrence is due to the fact that

document.getElementById('parent').children

gives back a live collection of children, and

document.getElementById('parent').children[i]

will forever be

<div class="asfd"></div>

. Therefore, it is necessary to create a duplicate 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])
}

<div id="parent">
  <div class="asfd">asfd</div>
  <div class="xcbs">xcbs</div>
  <div class="msfd">msfd</div>
  <div class="powg">powg</div>
  <div class="ksle">ksle</div>
</div>

Before each existing DIV in a loop, a new div is inserted using the insertBefore

Answer №1

Answer №2

Answer №3

Similar questions

Error in Cordova Android Compilation ("unable to locate Build Tools version 24.0.1")

Navigate the conversation within the dialog without affecting the content below

Accessing variables within the controller's scope

Limit how API call costs are set in a function by throttling based on an argument

Guide to creating varying component sizes using ReactJS and Styled Components

The function signature '(newValue: DateRange<dateFns>) => void' does not match the expected type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void' as per TypeScript rules

There appears to be a JavaScript validation error occurring on the current page, however, you are able

Is there a way to exit from await Promise.all once any promise has been fulfilled in Chrome version 80?

What is the process for creating a global variable in JavaScript?

Exploring the process of linking multiple checkbox fields in a form with an ajax request

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

Tips on creating a button that, upon clicking, triggers the download of an Excel file using PHPSpreadsheet

The findIndex method is failing to retrieve the accurate index

Different time parameter for setting a timeout in Javascript

Create a fresh field for the form and store the data in the database

The function canvas.toDataURL() is not recognized - error originating from a node-webGL wrapper

Issue with JavaScript not generating a header element within a specified div

Enhance information flow within pages using SWR in NextJS

Convert checkbox choices to strings stored in an array within an object

Utilizing jQuery to send AJAX requests and display the results on separate lines within a textarea