How to create and add elements to the DOM in a loop

Question

I want to append num amount of img elements to the DOM, and give each image an id according to which num it is. I know I need a loop, so this is what I have so far:

window.onload = function makeImage(){
  for(i=0;i<num;i++){  
    document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>";
  }
};

<div id="test"></div>

Create Image object and append it to container as a child node. — Sigismundus
– Sigismundus, Commented Feb 28, 2015 at 6:07

Community · Accepted Answer · 2017-05-23 12:06:32Z

1

Here are some code snippets and comments that should help you. Where you have id='i', it looks like you want this: '<img id="'+i+'"'. You concatenate in JavaScript using the + sign, so close your string with a quote, then concatenate, then open the string up again. It's easier to learn by breaking this up into steps. Here's the string without the value: '<img id=""' Then, you'll need to go in between the double quotes and close and open the string with single quotes, and concatenate i, so this: '+i+'. Altogether, you get '<img id="'+i+'"'

var num = 2;
// addEventListener is better practice than onload
window.addEventListener('load', function() {
  // get the element reference before the loop (no need to repeat this)
  var testElem = document.getElementById('test');
  for(i = 0; i < num; i++) {
    // create an img element, this is better practice than using innerHTML
    var img = document.createElement('img');
    img.src = "//placehold.it/100x100";
    img.id = 'image'+i;
    testElem.appendChild(img);
  }
});

<div id="test"></div>

You could also use innerHTML by concatenating the new image as in the following example, but this has drawbacks. Read more about createElement vs innerHTML here.

var num = 2;
window.addEventListener('load', function() {
  var testElem = document.getElementById('test');
  for(i = 0; i < num; i++) {
    testElem.innerHTML+= '<img id="image'+i+'"src="//placehold.it/100x100">';
  }
});

<div id="test"></div>

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 28, 2015 at 5:49

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

6 Comments

Xin Zhao Over a year ago

i got some questions. <img src="//placehold.it/100x100">'

Xin Zhao Over a year ago

i got some questions there. in this code of '<img src="//placehold.it/100x100">' , what's the meaning of ''//placehold.it' and "/100X100"? is it format of this sentense?

m59 Over a year ago

@XinZhao I don't know what you're asking. It's just a url. It's irrelevant. I just used that url for the demo. Put whatever you want.

m59 Over a year ago

@XinZhao If my answer solved your problem, don't forget to accept it by clicking the checkmark underneath the voting arrows to the left of the answer. Some new people don't know about that. Check out the tour if you haven't already: stackoverflow.com/tour Welcome to Stack Overflow!

Xin Zhao Over a year ago

it works. but I wanna keep image's id. for example, var num=2.

|

user2575725 · Accepted Answer · 2015-02-28 06:36:11Z

0

Problem here is you are not appending images in loop, old image just get overridden by the new one. Since you are using = operator.

document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>";
-----------------------------------------^

Use += instead, also you need to concat i value to get image unique ids:

var html = "";
var num = 3
for (var i = 1; num >= i; i++) {
  html += '<img src="http://www.tatwellness.com/store/image/cache/data/homewelcome/no%20image-200x200.png" id="img' + i + '"/>';
}

document.getElementById('test').innerHTML = html;

img {
  border: 1px solid grey;
  margin: 5px;
}

<div id="test"></div>

answered Feb 28, 2015 at 6:36

user2575725

Collectives™ on Stack Overflow

How to create and add elements to the DOM in a loop

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related