javascript createElement style problem

Question

today i wrote this function    function zoom obj               var img     document getElementById obj   false document getElementById obj               var fullImage    img getAttribute  image      null  false img getAttribute  image                if  fullImage     img    return false                if  document getElementById    img                  var ob     lt div id    img  style  position absolute top 300px left 300px width 200px height 200px -moz-border-radius 100px border 1px solid  ddd -moz-box-shadow  0px 0px 8px  fff display none   gt  lt  div gt                document write ob                img onmousemove   function e                var x   Math floor   e pageX-7  -  img offsetLeft - 8     100   img width               var y   Math floor   e pageY-7  -  img offsetTop - 8     100   img height               x    x gt 100  100  x lt 0  0 x              y    y gt 100  100  y lt 0  0 y              var ob   document getElementById    img                ob style background    url      fullImage       no-repeat               ob style display    block               ob style backgroundPosition   x          y                    ob style left   e pageX    px               ob style top   e pageY    px                             img onmouseout   function     document getElementById    img   style display  none                  I tried to use createElement   and appendChild   functions instead of this      var ob                     document write ob    but function does t work  how to make it to work with createElement    is it possible to add all style with one line code with pure JAVASCRIPT        ob style background    url      fullImage       no-repeat                   ob style display    block                   ob style backgroundPosition   x          y                        ob style left   e pageX    px                   ob style top   e pageY    px    Preview  JsFiddle

User · Answer

You need to call the appendChild function to append your new element to an existing element in the DOM

User · Answer

Others have given you the answer about appendChild    Calling document write   on a page that is not open  e g  has finished loading  first calls document open   which clears the entire content of the document  including the script calling document write   so it s rarely a good idea to do that

User · Answer

yourElement setAttribute  style    background-color red  font-size 2em       Or you could write the element as pure HTML and use  innerHTML    raw html code     that s very ugly though   In answer to your first question  first you use var myElement   createElement        then you do document body appendChild myElement

User · Answer

I found this page when I was trying to set the backgroundImage attribute of a div  but hadn t wrapped the backgroundImage value with url    This worked fine   for  var i 0  i lt 20  i           add a wrapper around an image element   var wrapper   document createElement  div      wrapper className    image-cell         add the image element   var img   document createElement  div      img className    image     img style backgroundImage    url http   via placeholder com 350x150          add the image to its container  add both to the body   wrapper appendChild img     document body appendChild wrapper

User · Answer

Works fine   var obj   document createElement  div    obj id      img   obj style cssText    position absolute top 300px left 300px width 200px height 200px -moz-border-radius 100px border 1px  solid  ddd -moz-box-shadow  0px 0px 8px   fff display none     document getElementById  divInsteadOfDocument Write   appendChild obj     You can also see how to set the the CSS in one go  using element style cssText      I suggest you use some more meaningful variable names and don t use the same name for different elements  It looks like you are using obj for different elements  overwriting the value in the function  and this can be confusing

[javascript] javascript createElement(), style problem

Examples related to javascript