Using a for loop to append multiple images in Javascript

Question

I just want a for loop to print the same image 10 times without manually creating 10 's since I may want to append more later. I have used this exact same code in other projects and it has worked but for some reason it won't work this time.

The image html is:

<img id = "crate" src="img/Acrate.png"/>

Here's my code:

function drawCrates (){
                        for(i = 0; i < 10; i++){
                            var crate_img = document.createElement("IMG");
                            crate_img.setAttribute("src", "images/Acrate.png");
                            document.getElementById("crate").appendChild(crate_img);
                        }
}
drawCrates();

you should append elements to those element which can contain other elements. Like you can append all the images to a div. — Md Ashaduzzaman
– Md Ashaduzzaman, Commented Jan 11, 2015 at 6:17

Md Ashaduzzaman · Accepted Answer · 2015-01-11 06:20:01Z

2

You need to append the image element to such element that can hold other elements. Try this,

HTML :

<div id="imageDiv">
</div>

javaScript :

function drawCrates (){
    for(i = 0; i < 10; i++){
        var crate_img = document.createElement("IMG");
        crate_img.setAttribute("src", "https://lh5.googleusercontent.com/-PfTrZFQ8c4U/AAAAAAAAAAI/AAAAAAAAAA0/IJXxoIqKNSU/photo.jpg");
        document.getElementById("imageDiv").appendChild(crate_img);
    }
}
drawCrates();

jsFiddle

answered Jan 11, 2015 at 6:20

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

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

Comments

wjohnsto · Accepted Answer · 2018-05-23 19:13:11Z

2

I would suggest using a DocumentFragment for speed, and then just cloning the node as you need it. The code looks like the following:

function drawCrates (){
    var fragment = document.createDocumentFragment(),
        img = document.createElement('img');

    img.setAttribute("src", "images/Acrate.png");
    fragment.appendChild(img);
    for(i = 0; i < 9; i++){
        fragment.appendChild(img.cloneNode(true));
    }

    document.body.appendChild(fragment);
}
drawCrates();

Your issue stems from trying to append an element as a child of an <img> element, which is invalid. The code you have:

<img id="crate" ... />

When you run the code document.getElementById("crate") you are grabbing the <img> element, and it is not possible to append child elements to an <img>.

edited May 23, 2018 at 19:13

answered Jan 11, 2015 at 6:21

wjohnsto

4,5032 gold badges16 silver badges20 bronze badges

1 Comment

Alexander O'Mara Over a year ago

This doesn't really address the issue of why appending to a img tag doesn't work.

Collectives™ on Stack Overflow

Using a for loop to append multiple images in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related