dynamically adding div elements using for loop

Question

I am using a for loop to dynamically add div elements to a parent node in JavaScript, but I am unable to do because it adds only one element.

My code is this:

var row = document.getElementById("rowel");

var col = document.createElement('div');
col.className = "col-sm-3 col-md-3 col-lg-3 mr-auto";



var card = document.createElement('img');
card.src = "./assets/building.jpg";
card.style["max-width"] = "350px";
card.alt = "cant displayed";

col.appendChild(card);

for (let index = 0; index < 5; index++) {

    row.appendChild(col);

}

Can some please help me to solve this?

There's only one `col` object. If you want to create more than one, move the `document.createElement` code into the loop. — Heretic Monkey, Mar 25 '20 at 19:40
You create one element and you keep trying to append it. Since it is the same object, it just removes itself and adds it to the new location. Clone it — epascarello, Mar 25 '20 at 19:42

score 2 · Answer 1 · answered Mar 25 '20 at 19:41

You are adding the same element in each iteration. Create a new object in every iteration and it should work

var row = document.getElementById("rowel");

for (let index = 0; index < 5; index++) {
    var col = document.createElement('div');
    col.className = "col-sm-3 col-md-3 col-lg-3 mr-auto";

    var card = document.createElement('img');
    card.src = "./assets/building.jpg";
    card.style["max-width"] = "350px";
    card.alt = "cant displayed";

    col.appendChild(card);

    row.appendChild(col);

}

yes i want to add the same element, because in some situation i need the same image to display .if i will not create a new object then it wont add ?? — ZaihamM Code, Mar 25 '20 at 19:49

score 0 · Accepted Answer · answered Mar 25 '20 at 19:52

When you are doing the following:

for (let index = 0; index < 5; index++) {
     row.appendChild(col);
}

you are adding 5 exact same col object.

It's like saying,

"Hey, kid A is my Child." 5 times.

In your case, it already knows that COL is a child of ROW. Its pointless to tell it million different times .

What you want is:

*"Hey, kid A is my Child."

*"Hey, kid B who looks exactly like A is my Child."

...

*"Hey, kid E who looks exactly like A is my Child."

Hence, this is what your code should look like:

for (let index = 0; index < 5; index++) {
   var col = document.createElement('div');
   col.className = "col-sm-3 col-md-3 col-lg-3 mr-auto";

   var card = document.createElement('img');
   card.src = "./assets/building.jpg";
   card.style["max-width"] = "350px";
   card.alt = "cant displayed";

   col.appendChild(card);
   row.appendChild(col);

}

Hope it helps!

thank you so much ...got it – ZaihamM Code Mar 25 '20 at 19:56 — ZaihamM Code, Mar 25 '20 at 19:56

dynamically adding div elements using for loop

2 Answers2

When you are doing the following:

What you want is: