Images into divs using JS

I have some Divs with unique id's and I need some javascript code that will populate the content of the div's with images with dynamically generated locations from a for loop and an integer based increment.

The problem I'm having at the moment is being able to add these images to the divs using only Javascript and without any preloaded default images in the divs that I could just manipulate.

I've tried previously to use InnerHtml of a specific document element with no sucess, and now i've tried creating the images as elements and using AppendChild() to add them, but it's not working.

Is there an easy way to load images using only javascript code into the content of the Div (not as the background image, i've already had that mentioned and its pointless)?

I'm trying to get 2 rows of 13 small images populated.


  • Try something like this.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    function Populate() {
    for(var i=1;i<=3;i++) {

    var elm = document.getElementById('div'+i);
    for(var j=0;j<10;j++) {
    var img = document.createElement('img');
    img.src = "../images/image"+j+".png";




    I could also recommend downloading an extended javascript framework like mootools or scriptacolous. Those offer a lot of extra javascript features and make things more browser independant.

    good luck with your project

    mailto:[email protected]
    the Netherlands...
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


In this Discussion