return image as HTML

Question

trying to add an image to my innerHTML.

Looked at a few prvious Q's Why does my image not show up when I use Javascript innerHTML to call it?

Javascripts innerHTML not working for images, but works with text?

I cant get it working, in google dev tools throws the error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

with this line:

var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";

my code looks like:

   function showImage() {
    var img = document.createElement('image');
    //var newImage = document.getElementById('img').innerHTML = "<a href='#'><img src='http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg' border=0/></a>";
    var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";
    var div5 = document.createElement('div');
    div5.appendChild(newImage);

    return div5.innerHTML;

}

I know there are many other methods to display an image, but for the purpose of this exercise I want to return the image as an innerHTML

Solution

Try this :

var img = document.createElement("img");
img.setAttribute('src', 'http://www.domain.com/imgSrc');
var div5 = document.createElement('div');
div5.appendChild(newImage);