during array iteration, the appendChild function is only executed once

Question

during array iteration, the appendChild function is only executed once

Here's a simple question for all of you:

So, I've got this for loop:

var pNewTag = document.createElement('p');
var grabWrapper = document.querySelector('.footerInfo');
var myArray = grabWrapper.children;

 for ( var i = 0; i < myArray.length; i++ ) {
   grabWrapper.children[i].appendChild(pNewTag);
   pNewTag.innerHTML = " this works ";
 }

The length of the array I'm using is 7, but the appendChild function within the loop only executes once. I want it to run on each iteration. Any ideas on what I'm overlooking?

javascript arrays for-loop appendchild

Answer 1

Answer №1

The reason for the issue is that you are manipulating a single element instead of creating separate elements for each iteration.

var grabFooter = document.querySelector('.footerInfo');
var footerChildren = grabFooter.children;

for ( var i = 0; i < footerChildren.length; i++ ) {
   var newParagraph = document.createElement('p');
   newParagraph.innerHTML = " this solution ";

   grabFooter.children[i].appendChild(newParagraph);
}

Answer 2

The reason for the issue is that you are manipulating a single element instead of creating separate elements for each iteration.

var grabFooter = document.querySelector('.footerInfo');
var footerChildren = grabFooter.children;

for ( var i = 0; i < footerChildren.length; i++ ) {
   var newParagraph = document.createElement('p');
   newParagraph.innerHTML = " this solution ";

   grabFooter.children[i].appendChild(newParagraph);
}

Answer 3

Answer №2

In order to achieve this, you will need to generate several p elements:

var footerInfo = document.querySelector('.footerInfo');
var childElementsArray = footerInfo.children;

for ( var i = 0; i < childElementsArray.length; i++ ) {
    var newPTag = document.createElement('p');
    newPTag.innerHTML = " this is effective ";
    footerInfo.children[i].appendChild(newPTag);
}

It is advisable to populate the element before inserting it into the document. By following this approach, your browser will avoid reflowing the document twice.

Answer 4

In order to achieve this, you will need to generate several p elements:

var footerInfo = document.querySelector('.footerInfo');
var childElementsArray = footerInfo.children;

for ( var i = 0; i < childElementsArray.length; i++ ) {
    var newPTag = document.createElement('p');
    newPTag.innerHTML = " this is effective ";
    footerInfo.children[i].appendChild(newPTag);
}

It is advisable to populate the element before inserting it into the document. By following this approach, your browser will avoid reflowing the document twice.

during array iteration, the appendChild function is only executed once

Answer №1

Answer №2

Similar questions

jQuery fails to execute in ajax success function

How can I activate JQUERY when an event occurs?

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

What could be the reason for my error messages not displaying when I have defined them on a static method in the schema, despite the error handling seeming to

Utilizing the Jquery hover feature to reveal or conceal an element

Creating Lists dynamically in Java without any duplicates can be achieved by using a HashSet to store

Utilizing a switch case for typing

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Toggling the visibility of divs in a dynamic layout

Using TinyMCE from within a PHP function only displays a basic textarea box

Updating Angular to switch out the HTML content with a direct hyperlink to a specific section within a

Clear the div content when submitting the form

Converting a JSON string into a JavaScript array

What is the best way to handle mapping an array with uncertain levels of nesting?

The HTTP GET request was successful, however, there is no data being displayed on the screen

Angular 2 sidebar icons appearing vertically instead of in a row

Utilizing the current state within a React callback function closure: A guide to maximising efficiency

Which is more memory efficient: creating an object with functions defined on it using a function, or creating an instance of a class?

Extracting information from the fileuploadfield in Ext JS 3