What is the best JavaScript code to create an img element

Question

I want to create a simple bit of JS code that creates an image element in the background and doesn t display anything   The image element will call a tracking URL  such as Omniture  and needs to be simple and robust and work in IE 6   lt  only   Here is the code I have   var oImg   document createElement  img    oImg setAttribute  src    http   www testtrackinglink com    oImg setAttribute  alt    na    oImg setAttribute  height    1px    oImg setAttribute  width    1px    document body appendChild oImg     Is this the simplest but most robust  error free  way to do it   I cannot use a framework like jQuery   It needs to be in plain JavaScript

User · Accepted Answer

oImg setAttribute  width    1px      px is for CSS only  Use either   oImg width    1     to set a width through HTML  or   oImg style width    1px     to set it through CSS   Note that old versions of IE don t create a proper image with document createElement    and old versions of KHTML don t create a proper DOM Node with new Image    so if you want to be fully backwards compatible use something like      IEWIN boolean previously sniffed through eg  conditional comments  function img create src  alt  title        var img   IEWIN   new Image     document createElement  img        img src   src      if   alt    null   img alt   alt      if   title    null   img title   title      return img      Also be slightly wary of document body appendChild if the script may execute as the page is in the middle of loading  You can end up with the image in an unexpected place  or a weird JavaScript error on IE  If you need to be able to add it at load-time  but after the  lt body gt  element has started   you could try inserting it at the start of the body using body insertBefore body firstChild    To do this invisibly but still have the image actually load in all browsers  you could insert an absolutely-positioned-off-the-page  lt div gt  as the body s first child and put any tracking preload images you don t want to be visible in there

User · Answer

var img   document createElement  img    img src    my image jpg   document getElementById  container   appendChild img

User · Answer

you could simply do   var newImage   new Image    newImage src    someImg jpg    if document images      document images yourImageElementName src   newImage src      Simple

User · Answer

Just for the sake of completeness  I would suggest using the InnerHTML way as well - even though I would not call it the best way     document getElementById  image-holder   innerHTML     lt img src  image png  alt  The Image    gt      By the way  innerHTML is not that bad

User · Answer

This is the method I follow to create a loop of img tags or a single tag as ur wish  method1       let pics document getElementById  pics-thumbs                let divholder document createDocumentFragment                for let i 1 i lt 73 i                                  let img document createElement  img                    img class  img-responsive                   img src  images fun  i  jpg                   divholder appendChild img                             pics appendChild divholder     or   method2   let pics   document getElementById  pics-thumbs      imgArr       for  let i   1  i  lt  73  i         imgArr push   lt img class  img-responsive  src  images fun  i  jpg  gt       pics innerHTML   imgArr join   lt br gt     lt div id  pics-thumbs  gt  lt  div gt

User · Answer

jQuery       container   append   lt img src   path to image jpg         width  16  height  16  alt  Test Image  title  Test Image    gt       I ve found that this works even better because you don t have to worry about HTML escaping anything  which should be done in the above code  if the values weren t hard coded   It s also easier to read  from a JS perspective        container   append     lt img gt           src     path to image jpg        width   16       height   16       alt    Test Image        title    Test Image

User · Answer

Just for the sake of completeness  I would suggest using the InnerHTML way as well - even though I would not call it the best way     document getElementById  image-holder   innerHTML     lt img src  image png  alt  The Image    gt      By the way  innerHTML is not that bad

User · Answer

var img   document createElement  img    img src    my image jpg   document getElementById  container   appendChild img

User · Answer

jQuery       container   append   lt img src   path to image jpg         width  16  height  16  alt  Test Image  title  Test Image    gt       I ve found that this works even better because you don t have to worry about HTML escaping anything  which should be done in the above code  if the values weren t hard coded   It s also easier to read  from a JS perspective        container   append     lt img gt           src     path to image jpg        width   16       height   16       alt    Test Image        title    Test Image

User · Answer

Just for the sake of completeness  I would suggest using the InnerHTML way as well - even though I would not call it the best way     document getElementById  image-holder   innerHTML     lt img src  image png  alt  The Image    gt      By the way  innerHTML is not that bad

User · Answer

Are you allowed to use a framework  jQuery and Prototype make this sort of thing pretty easy  Here s a sample in Prototype   var elem   new Element  img      class    foo   src   pic jpg   alt   alternate text        document  insert elem

User · Answer

As others pointed out if you are allowed to use a framework like jQuery the best thing to do is use it  as it high likely will do it in the best possible way  If you are not allowed to use a framework then I guess manipulating the DOM is the best way to do it  and in my opinion  the right way to do it

User · Answer

Shortest way     new Image    src    http  track me image gif

User · Answer

Are you allowed to use a framework  jQuery and Prototype make this sort of thing pretty easy  Here s a sample in Prototype   var elem   new Element  img      class    foo   src   pic jpg   alt   alternate text        document  insert elem

User · Answer

Just to add full html JS example   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt create image demo lt  title gt       lt script gt            function createImage                 var x   document createElement  IMG                x setAttribute  src    http   www iseebug com wp-content uploads 2016 09 c2 png                x setAttribute  height    200                x setAttribute  width    400                x setAttribute  alt    suppp                document getElementById  res   appendChild x                   lt  script gt   lt  head gt   lt body gt   lt button onclick  createImage    gt ok lt  button gt   lt div id  res  gt  lt  div gt    lt  body gt   lt  html gt

User · Answer

Are you allowed to use a framework  jQuery and Prototype make this sort of thing pretty easy  Here s a sample in Prototype   var elem   new Element  img      class    foo   src   pic jpg   alt   alternate text        document  insert elem

User · Answer

Are you allowed to use a framework  jQuery and Prototype make this sort of thing pretty easy  Here s a sample in Prototype   var elem   new Element  img      class    foo   src   pic jpg   alt   alternate text        document  insert elem

User · Answer

As others pointed out if you are allowed to use a framework like jQuery the best thing to do is use it  as it high likely will do it in the best possible way  If you are not allowed to use a framework then I guess manipulating the DOM is the best way to do it  and in my opinion  the right way to do it

User · Answer

var img   new Image 1 1      width  height values are optional params  img src    http   www testtrackinglink com

User · Answer

jQuery       container   append   lt img src   path to image jpg         width  16  height  16  alt  Test Image  title  Test Image    gt       I ve found that this works even better because you don t have to worry about HTML escaping anything  which should be done in the above code  if the values weren t hard coded   It s also easier to read  from a JS perspective        container   append     lt img gt           src     path to image jpg        width   16       height   16       alt    Test Image        title    Test Image

User · Answer

As others pointed out if you are allowed to use a framework like jQuery the best thing to do is use it  as it high likely will do it in the best possible way  If you are not allowed to use a framework then I guess manipulating the DOM is the best way to do it  and in my opinion  the right way to do it

User · Answer

Shortest way     new Image    src    http  track me image gif

User · Answer

jQuery       container   append   lt img src   path to image jpg         width  16  height  16  alt  Test Image  title  Test Image    gt       I ve found that this works even better because you don t have to worry about HTML escaping anything  which should be done in the above code  if the values weren t hard coded   It s also easier to read  from a JS perspective        container   append     lt img gt           src     path to image jpg        width   16       height   16       alt    Test Image        title    Test Image

User · Answer

Just to add full html JS example   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt create image demo lt  title gt       lt script gt            function createImage                 var x   document createElement  IMG                x setAttribute  src    http   www iseebug com wp-content uploads 2016 09 c2 png                x setAttribute  height    200                x setAttribute  width    400                x setAttribute  alt    suppp                document getElementById  res   appendChild x                   lt  script gt   lt  head gt   lt body gt   lt button onclick  createImage    gt ok lt  button gt   lt div id  res  gt  lt  div gt    lt  body gt   lt  html gt

User · Answer

var img   new Image 1 1      width  height values are optional params  img src    http   www testtrackinglink com

User · Answer

Shortest way     new Image    src    http  track me image gif

User · Answer

This is the method I follow to create a loop of img tags or a single tag as ur wish  method1       let pics document getElementById  pics-thumbs                let divholder document createDocumentFragment                for let i 1 i lt 73 i                                  let img document createElement  img                    img class  img-responsive                   img src  images fun  i  jpg                   divholder appendChild img                             pics appendChild divholder     or   method2   let pics   document getElementById  pics-thumbs      imgArr       for  let i   1  i  lt  73  i         imgArr push   lt img class  img-responsive  src  images fun  i  jpg  gt       pics innerHTML   imgArr join   lt br gt     lt div id  pics-thumbs  gt  lt  div gt

User · Answer

you could simply do   var newImage   new Image    newImage src    someImg jpg    if document images      document images yourImageElementName src   newImage src      Simple

User · Answer

var img   new Image 1 1      width  height values are optional params  img src    http   www testtrackinglink com

User · Answer

Just for the sake of completeness  I would suggest using the InnerHTML way as well - even though I would not call it the best way     document getElementById  image-holder   innerHTML     lt img src  image png  alt  The Image    gt      By the way  innerHTML is not that bad

User · Answer

var img   document createElement  img    img src    my image jpg   document getElementById  container   appendChild img

User · Answer

var img   new Image 1 1      width  height values are optional params  img src    http   www testtrackinglink com

User · Answer

As others pointed out if you are allowed to use a framework like jQuery the best thing to do is use it  as it high likely will do it in the best possible way  If you are not allowed to use a framework then I guess manipulating the DOM is the best way to do it  and in my opinion  the right way to do it

User · Answer

var img   document createElement  img    img src    my image jpg   document getElementById  container   appendChild img

User · Answer

Shortest way     new Image    src    http  track me image gif

[javascript] What is the best JavaScript code to create an img element

Examples related to javascript

Examples related to dhtml