//OUTPUT: Adding images to an output HTML element

<New code>

//PROCESS: var newImage = document.createElement( "img" );
— creates a new image element with no source link

//PROCESS: newImage.src = "http://drapak.ca/cpg/img/link-up.png";
— adds a source link to the image element
//PROCESS: newImage.style.position = "absolute";
— sets the position style of the image element to absolute
//PROCESS: newImage.style.top = "10px";
— sets the top position of the image element to 10px
//PROCESS: newImage.style.left = "20px";
— sets the left position of the image element to 20px

//OUTPUT: document.getElementById( 'outputID' ).appendChild( newImage );
— adds the new image element to the inside of #outputID

Sometimes .innerHTML is slow and confusing

In many of your programs, you will be adding images to the inside of an HTML element. So far, you code has tended to look a little like this: 

var exampleObj = {
    //INIT: set up the image variables
    // top coordinate of the image
    this.top:   35,
    
    // left coordinate of the image
    this.left:  65, 

    // source link to image file
    this.src = "http://drapak.ca/cpg/img/link-up.png",

    //combine the data all together into an image element similar to:
    // <img 
    //      src='http://drapak.ca/cpg/img/link-up.png'
    //      style='position: absolute; top: 35px; left: 65px;' />
    createAndOutputImage: function () {
        //create an empty variable to hold the HTML code of the image
        var outputHTML = "";

        outputHTML 
            = "<img src='"
            + this.src
            + "' style='position: absolute; top: "
            + this.top
            + "px; left: "
            + this.left
            + "px;' />";
    
        //put the resulting HTML code inside a div called #outputID
        document.getElementById('outputID').innerHTML = outputHTML;
    }
}

As you can see, there is plenty of opportunities for things to get messed up. If you have:

...then your code will die. As well, using .innerHTML can take a long time to run if you are inserting a lot of images. Each time code is added to a page, the page has to be reflowed to calculate the new positions of the elements. Using .innerHTML can make that take a long time because it has to convert and interpret the HTML code into the internal data structures of the web browser.

Creating and inserting elements

But what if we insert the data directly inside the web browser's data structures?

It turns out that this makes your code run much happier if you add a lot to your programs' HTML.

And it also turns out that this it also easier and cleaner to code! Take a look at the code below that does the same thing as above.

Notice how it is easier to read and there are less places to make mistakes?

var exampleObj = {
    //INIT: set up the image variables
    // top coordinate of the image
    this.top:   35,
    
    // left coordinate of the image
    this.left:  65, 

    // source link to image file
    this.src = "http://drapak.ca/cpg/img/link-up.png",

    //combine the data all together into an image element similar to:
    // <img 
    //      src='http://drapak.ca/cpg/img/link-up.png'
    //      style='position: absolute; top: 35px; left: 65px;' />
    createAndOutputImage: function () {
        // create a new empty image element
        var newImage            = document.createElement("img");

        // add properties to this new empty image element
        newImage.src            = this.src;
        newImage.style.position = 'absolute';
        newImage.style.top      = this.top + 'px';
        newImage.style.left     = this.left + 'px';
            
        //put the resulting element inside a div called #outputID 
        document.getElementById('outputID').appendChild( newImage );
    }
}

Learn more