Loop and array issue

Question

Ok, I have a literal arrays where there are some images in it. I have an empty DIV where a FOR LOOP will be carried out to display all the images in the array in the div.

var icons = [
    '<img src="images/1.png" width="30" height="30"/>',
    '<img src="images/2.png" width="30" height="30"/>',
    '<img src="images/3.png" width="30" height="30"/>'
    ];

    var lol = document.getElementById("div");

    for (var i=0; i<icons.length; i++) {
            lol.innerHTML = icons[i] ;
        }

The issue is only the last image is displayed not all...

Better use DOM manipulation rather than innerHTML.

Alvin Wong
– Alvin Wong

2012-11-03 08:05:49 +00:00
Commented Nov 3, 2012 at 8:05 — Alvin Wong
– Alvin Wong, Commented Nov 3, 2012 at 8:05

alexn · Accepted Answer · 2012-11-03 08:05:02Z

1

That is because you are overwriting the previous image with the current one. If you want to append/concat all images, use +=:

lol.innerHTML += icons[i];

A better way to handle this would be to use DOM handling:

var img = document.createElement("img");
img.setAttribute("src", icons[i]);

lol.appendChild(img);

answered Nov 3, 2012 at 8:05

alexn

59.2k14 gold badges114 silver badges146 bronze badges

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

3 Comments

user1780468 Over a year ago

i prefer the += lol.innerHTML.... as if someone wants to add an image, just just it in the array...

alexn Over a year ago

That works with the DOM handling to. Just put my last snippet inside your for-loop.

Alvin Wong Over a year ago

@user1780468 Yeah, that works, but innerHTML is just as evil as document.write. It can easily break the DOM if careless. That's why I prefer DOM manipulation with the use of document.createElementand document.createTextNode.

JB Nizet · Accepted Answer · 2012-11-03 08:05:53Z

0

Each time you do

lol.innerHTML = icons[i];

you're replacing the inner HTML of the div with icons[i]. Concatenate all your icon elements, and then set the inner HTML of the div with the result of the concatenation.

answered Nov 3, 2012 at 8:05

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

Man Programmer · Accepted Answer · 2012-11-03 08:08:08Z

0

your code is overwrite the innerHTML you can append the innerHTML

try this

lol.innerHTML += icons[i];

this above code is append the innerHTML

or in jquery you can use append function

$('#div').append(icons[i]);

answered Nov 3, 2012 at 8:08

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

Collectives™ on Stack Overflow

Loop and array issue

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related