Adding images to the html with javascript

Question

I've tried some HTML DOM code from several sites, but it isn't working. It isn't adding anything. Does anyone have a working example on this?

this.img = document.createElement("img");
this.img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = getElementById("gamediv");
src.appendChild(this.img)

But it isn't adding anything to the div. (gamediv) I've tried document.body as well, with no result.

Thanks in advance.

Answer 1

You need to use document.getElementById() in line 3.

If you try this right now in the Firebug console:

var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";

var src = document.getElementById("header");
src.appendChild(img);

... you'd get this:

Answer 2

Things to ponder:

1. Use jquery
2. Which this is your code refering to
3. Isnt getElementById usually document.getElementById?
4. If the image is not found, are you sure your browser would tell you?

Answer 3

Get rid of the this statements too

var img = document.createElement("img");
img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = document.getElementById("gamediv");
src.appendChild(this.img)

Answer 4

This works:

var img = document.createElement('img');
img.src = 'img/eqp/' + this.apparel + '/' + this.facing + '_idle.png';
document.getElementById('gamediv').appendChild(img)

Or using jQuery:

$('<img/>')
.attr('src','img/eqp/' + this.apparel + '/' + this.facing + '_idle.png')
.appendTo('#gamediv');