create multiple divs using a for loop

Question

This is a really simple question but I don't know why it doesn't work. I have an array with 3 items inside. And I have a container which I would like to insert a number of divs based on the number of items in my array. I used a for loop for this but it is only creating one div. Should it not create 3?

for (var i = 0; i < array.length; i++) {
   var container = document.getElementById("container");
   container.innerHTML = '<div class="box"></div>';
}

here is a fiddle to demonstrate further fiddle

Use += instead of = if you want to add content to the container and not replace it. — Holt
– Holt, Commented Aug 10, 2015 at 12:43
You keep replacing/overwriting the innerHTML of your #container in every loop step by using =. Instead use append() or +=. Also, you make unnecessary DOM access in every loop step which is a very expensive operation. Move the definition of your container variable outside of the loop. — connexo
– connexo, Commented Aug 10, 2015 at 12:52
@Holt The fact that you've suggested += and that your comment has earned upvotes is unsettling to say the least. Please see this comment and this one. — canon
– canon, Commented Aug 10, 2015 at 13:46

Vivek Jain · Accepted Answer · 2015-08-10 13:29:00Z

22

Move container out of the loop, it is not required inside it.

Append the innerHTML in each iteration.

var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
   container.innerHTML += '<div class="box"></div>';
}

Edit:

Thanks Canon, for your comments. I also wanted to suggest the same approach as yours, but I got busy in some other work after posting the answer [No excuses :)] Updating the answer:

var htmlElements = "";
for (var i = 0; i < array.length; i++) {
   htmlElements += '<div class="box"></div>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;

This may look like involving more lines of code but this will be more efficient and less error-prone than the previous solution.

edited Aug 10, 2015 at 13:29

answered Aug 10, 2015 at 12:44

Vivek Jain

3,8856 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

canon Over a year ago

innerHTML is parsed everytime you set it. When you modify the innerHTML in a loop, the DOM is discarded and the markup re-parsed for every iteration. That's pretty inefficient... and a terrible thing to suggest to someone new to javascript. Either build the entire markup as a string first and set innerHTML once, or add elements to a document fragment and append the whole fragment.

Vivek Jain Over a year ago

@canon, thanks for your comment, I have updated my answer :)

Vivek Jain Over a year ago

@sai, please check the edited answer and use it to suit your purpose :)

Sai Over a year ago

Yes I have made the changes, thank you @canon and theghostofc for the clear solution and explanation.

Vivek Jain · Accepted Answer · 2018-01-31 14:46:04Z

3

Replace = to +=

As per the @canon comment, edited answer are below

var innerHTMLString = "";  
forloop {
    innerHTMLString += '<div class="box"></div>';
}
document.getElementById("htmlElements").innerHTML = innerHTMLString

edited Jan 31, 2018 at 14:46

Vivek Jain

3,8856 gold badges33 silver badges47 bronze badges

answered Aug 10, 2015 at 12:45

Hardik Raval

1,9401 gold badge16 silver badges29 bronze badges

1 Comment

canon Over a year ago

Please see this comment.

Pavel Kharibin · Accepted Answer · 2015-08-10 12:46:07Z

1

Replace this

container.innerHTML = '<div class="box"></div>';

with this

container.innerHTML += '<div class="box"></div>';

answered Aug 10, 2015 at 12:46

Pavel Kharibin

7752 gold badges15 silver badges25 bronze badges

2 Comments

canon Over a year ago

Please see this comment.

Pavel Kharibin Over a year ago

@canon, ok got it. But according to the provided code, it was the first what I have seen.

Vivek Jain · Accepted Answer · 2015-08-10 13:31:13Z

0

If you want to create more than one, you must call createElement more than once.

d=document.createElement("div");
line into the j loop.

If you call appendChild passing in an element that's already in the DOM, it's moved, not copied.

window.onload=function()
{
    var i=0;
    var j=0;

    for (i=1; i<=8; i++)
    {
        for (j=1; j<=8; j++)
        {
            if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0))
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="black";
            }
            else
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="white";
            }
        }
    }
}

edited Aug 10, 2015 at 13:31

Vivek Jain

3,8856 gold badges33 silver badges47 bronze badges

answered Aug 10, 2015 at 12:52

user5135860

Comments

Vivek Jain · Accepted Answer · 2015-08-10 13:31:38Z

0

Javascript Method -

var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
    container.innerHTML += '<div class="box"></div>';
}

jQuery Method -

foreach(array as value){
    $("#container").append('<div class="box"></div>')
}

edited Aug 10, 2015 at 13:31

Vivek Jain

3,8856 gold badges33 silver badges47 bronze badges

answered Aug 10, 2015 at 12:54

M3ghana

1,3011 gold badge9 silver badges19 bronze badges

1 Comment

canon Over a year ago

Please see this comment.

Dženis H. · Accepted Answer · 2019-09-06 22:53:39Z

0

For further references; what about this approach? :)

HTML:

<div class="particles">
   <div class="parts"></div>
</div>

JavaScript:

// Cloning divs where particles go in order not to put 300 of them in the markup :)

 const node = document.querySelector(".parts");
 [...Array(300)].forEach(_ =>
 node.parentNode.insertBefore(node.cloneNode(true), node)
 );

answered Sep 6, 2019 at 22:53

Dženis H.

7,8923 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

create multiple divs using a for loop

6 Answers 6

Edit:

4 Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Edit:

4 Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related