 <p>Working example here: <a href="http://jsfiddle.net/0vts5291/" rel="nofollow">http://jsfiddle.net/0vts5291/</a></p> <p>HTML</p> <pre><code>&lt;section id=main&gt; &lt;!--populate with images from array--&gt; &lt;p id="photos" class="product_display"&gt; &lt;/section&gt; </code></pre> <p>JS</p> <pre><code>var imageArray = new Array(); imageArray[0]="images/coffee_prod_1.png"; imageArray[1]="images/coffee_prod_2.png"; imageArray[2]="images/coffee_prod_3.png"; imageArray[3]="images/coffee_prod_4.png"; imageArray[4]="images/coffee_prod_5.png"; imageArray[5]="images/coffee_prod_6.png"; imageArray[6]="images/coffee_prod_7.png"; //price array for products var priceArray = ["€11.90", "€12.90", "€13.90", "€14.90", "€15.90", "€16.90", "€17.90"]; function getImage() { var container = document.getElementById("photos"); for (var i = 0; i &lt; imageArray.length; ++i) { var img = new Image(); img.src = imageArray[i]; img.className = "product_details"; img.name = priceArray[i]; img.title = priceArray[i]; container.appendChild(img); } } getImage(); </code></pre>