Jump to content

Creating a new DOM element


legolas

Recommended Posts

I need to position an image in my document on-the-fly at a specific location and I've tried the following piece of code...var marker = document.createElement('div');var cssString = 'background-image:url (pics/dot.gif);position:absolute;top:250px;left:200px;';if (typeof(marker.style.cssText) == 'string') { marker.style.cssText = cssString;}marker.setAttribute('style',cssString);body[0].appendChild(marker);after reading http://www.howtocreate.co.uk/tutorials/jav.../domstylesheets...but the image doesn't show up at all.Can anyone see what I'm doing wrong or what's missing?

Link to comment
Share on other sites

I don't reallyn trust the CSS text because I've never used it. I'd do it this way:var marker = document.createElement('div');marker.style.backgroundImage = 'url (pics/dot.gif)';marker.style.position = 'absolute';marker.style.top = '250px';marker.style.left ='200px';document.body.appendChild(marker);Oh, and if you don't see anything it's because the <div> tag doesn't have any height because there's nothing inside it.You can give it a height:marker.style.height = "200px";

Link to comment
Share on other sites

Yeah, that was better although I had to add a width property as well. Then I defined the size of the div tag equal to the size of my gif image.The code that now displays the image correctly:var marker = document.createElement('div');marker.style.backgroundImage = 'url(pics/dot.gif)';marker.style.position = 'absolute';marker.style.top = '250px';marker.style.left ='200px';marker.style.height = '10px';marker.style.width = '10px';document.body.appendChild(marker);Thanks for your advice!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...