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.
The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
How do we put an image on a webpage? In order to put a simple image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source).
You need to use document.getElementById()
in line 3.
If you try this right now in the 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);
<div id="header"></div>
... you'd get this:
With a little research i found that javascript does not know that a Document Object Exist unless the Object has Already loaded before the script code (As JavaScript reads down a page).
<head> <script type="text/javascript"> function insert(){ var src = document.getElementById("gamediv"); var img = document.createElement("img"); img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png"; src.appendChild(img); } </script> </head> <body> <div id="gamediv"> <script type="text/javascript"> insert(); </script> </div> </body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With