Adding images to an HTML document 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

User · Accepted Answer

You need to use document getElementById   in line 3   If you try this right now in the console    x000D   x000D  var img   document createElement  img    x000D  img src    http   www google com intl en com images logo plain png   x000D  var src   document getElementById  header    x000D  src appendChild img   x000D   lt div id  header  gt  lt  div gt  x000D   x000D   x000D        you d get this

User · Answer

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       lt img  gt     attr  src   img eqp     this apparel         this facing     idle png    appendTo   gamediv

User · Answer

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

User · Answer

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     lt head gt       lt script type  text javascript  gt          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                   lt  script gt    lt  head gt    lt body gt        lt div id  gamediv  gt            lt script type  text javascript  gt               insert              lt  script gt        lt  div gt    lt  body gt

User · Answer

Things to ponder    Use jquery Which this is your code refering to Isnt  getElementById usually document getElementById  If the image is not found  are you sure your browser would tell you

User · Answer

or you can just  lt script gt   document write   lt img src  quot   picture location  you can just copy the picture and paste   it into the script    quot    document getElementById  pic    lt  script gt   lt div id  quot pic quot  gt   lt  div gt

[javascript] Adding images to an HTML document with javascript

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to image