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> 

Answer 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> 

Answer 2

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>