The problem:
So I am creating a fancy user interface component with XHTML and JavaScript, what is known by the obscenely vague term DHTML. And it is pretty much a dynamic thing – one of the functional components creates
<img>elements which it then proceeds to append to the page’s DOM structure. More fun than fancy, the code looks like this:
// create the element
var legendImageElement = document.createElement("img");
legendImageElement.setAttribute('src', "images/dot.gif");
legendImageElement.setAttribute('height', 20);
legendImageElement.setAttribute('width', 1);
legendImageElement.setAttribute("id", "stick1");
legendImageElement.setAttribute("class", "legendLine");
// get a handle on the div under which the element will be placed
var snapStatusDiv = document.getElementById("slider-container");
// append the element to the div
snapStatusDiv.appendChild(legendImageElement);
This all works in Internet Explorer except for the fact that it does not actually apply the class attribute to the newly created element. but when I try to position these newly created elements, Internet Explorer refuses to do so dynamically using a line like
legendImageElement.style.left = 50px;
The only way I can get Internet Explorer to position the element is to set its class attribute, and do that after the element was actually added to the page. There is no visual lag, but setting a class is much less flexible than actually accessing an element’s positioning.
Worse, if I try to output the dynamically-created-element’s position on the page, all that is returned is an empty string.I have a couple ideas to go around this limit, but in all, it is either pretty lame or that I just need to dig deeper to find an answer.
The solution to this issue was pretty simple but took time to experiment.
First, after you add the element to the page, you need to get a handle of the actual element using the getElementById() method (which also means that the dynamically created element needs to have its id attribute set).
Once you have a reference to the element, you need to define its style in three steps.
1. theElementRef.style.position = "absolute"; // (coould also be "relative")
2. theElementRef.style.left= "50px";
.. and this works!
The complete code again…
var legendImageElement = document.createElement("img");
legendImageElement.setAttribute('src', "images/dot.gif");
legendImageElement.setAttribute('height', 20);
legendImageElement.setAttribute('width', 1);
legendImageElement.setAttribute("id", "stick1");
var snapStatusDiv = document.getElementById("container");
snapStatusDiv.appendChild(legendImageElement);
var theImage = document.getElementById("stick1");
theImage.style.position = "absolute";
theImage.style.left = "50px";
theImage.style.top = "50px";
