Displaying Images in Javascript

Question

OK, so I'm making a website in HTML, and it's working great, but I need to know how to display images on the page in javascript. I have in my website where there is a part on the homepage called news, and it's going to display an image about the topic, but I don't know how to display the image. When I use other website's ways, the image just displays as a square with a ? in the middle. Please help!!

Answer 1

This will work:

DEMO

javascript:

var i = document.getElementById('test'); //get the element to put the picture in 

i.innerHTML = '<img src="http://pathtopicture.jpg"></img>'; // append the picture to the divs inner HTML

HTML:

<div id="test"></div>

---

Or without HTML in the first place (of course you need html and body tag...)

DEMO2

Code:

var i = document.createElement('div');
i.id = 'test';
document.getElementsByTagName('body')[0].appendChild(i);
i.innerHTML = '<img src="http://pathtopicture.jpg"></img>';

Answer 2

var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.appendChild(content);

I got these answers from:
How to display image with javascript?
How to append data to div using javascript?