Programmatic DOM node manipulation is actually not straightforward, given that Internet Explorer has so many unique DOM behaviors. I ran into quite a few issues recently when I was playing with Dojo Toolkit . I didn’t find a thorough answer to my questions when going through Dojo source code (Pardon my ignorance here. I am very sure that Dojo folks have run into these issues before and have solved them. It is just my stupidity of not being able to find the answers via source code reading). Further, I was surprised that I couldn’t find a lot of information about this on the web either. Hence this blog entry is created as a note to whoever is interested in programmatic DOM on Internet Explorer.
Let’s take a really simple example. Let’s say that you want to programmatically create an HTML DOM node, and programmatically set its attributes. The value of these attributes may be coming from the server or somewhere else. For the sake of this article, we’ll just assume that they are pre-defined in a JSON array. Sounds really simple, right?
It is simple indeed. Here is the source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Programmatic DOM Node</title>
<script type="text/javascript">
var srcNames=["id", "style", "onClick"];
var srcArray={id: "myNode",
style: "width: 200px; height: 100px; background-color: red",
onClick: "javascript: alert('hello');"};
function run() {
create();
test();
};
function create(){
var parentNode=document.getElementById("parentNode");
var childNode=document.createElement("div");
for (var attrName in srcArray){
var attrValue=srcArray[attrName];
childNode.setAttribute(attrName, attrValue);
}
parentNode.appendChild(childNode);
}
function test(){
var childNode=document.getElementById(srcArray.id);
if(childNode) {
var attributes = childNode.attributes;
for(var i=0;i<srcNames.length;i++){
var name=srcNames[i];
var item = attributes.getNamedItem(name);
if(navigator.userAgent.indexOf("MSIE")!=-1 && name=="style" )
{
alert("name="+name+",item="+item+", value="+childNode.style.cssText);
continue;
}
if(item) alert("name="+name+",item="+item+", value="+item.value);
else alert("name="+name+",item=null");
}
}
}
</script></head>
<body onload="run();">
<h1>Programmatic DOM Node Manipulation</h1>
<div id="parentNode" style="width: 400px; height: 200px; background-color: blue" >
</div>
</body>
</html>
That’s it! The node’s information is in a pre-defined array named “srcArray”.. In the code, we have a “create” method that programmatically creates a “div” node, assigns all the attributes from the “srcArray” to the “div” node, and then appends the “div” node to the parent node in the HTML document. We also have a “test” method that verifies whether the node attribute name and value have been set up correctly or not.
If you run this example on FireFox or Safari, it worked exactly as we intended. And the “test” function shows that all attributes have been set up as expected. However, if you run the page on Internet Explorer, the newly created node doesn’t show up. Further, the “test” function shows that attributes “style” and “onClick” are not set up (both remains as null).
This is odd! If you do some research on the web, or simply read Dojo source code, you will quickly figure out that IE needs special attention. The first issue is that setting the “style” attribute via DOM API “setAttribute()” doesn’t work. From Dojo source code as well as web sources, here is what we should do:
…
for(var attrName in srcArray){
var attrValue=srcArray[attrName];
childNode.setAttribute(attrName, attrValue);
if(navigator.userAgent.indexOf("MSIE")!=-1) {
attrName=attrName.toLowerCase();
if(attrName=="style"){childNode.style.cssText=attrValue;
}
}
}
…
Similarly, we should change the “test” function to display the “style” attribute:
{
var childNode=document.getElementById(srcArray.id);
if(childNode) {
var attributes = childNode.attributes;
for(var i=0; i<srcNames.length; i++)
{
var name=srcNames[i];
var item = attributes.getNamedItem(name);
if(navigator.userAgent.indexOf("MSIE")!=-1 && name=="style" )
{
alert("name="+name+",item="+item+", value="+childNode.style.cssText);
continue;
}
if(item) alert("name="+name+",item="+item+", value="+item.value);
else alert("name="+name+",item=null");
}
}
}
After you make the above change, the page is displayed correctly on Internet Explorer. However, there is still a problem. The “test” function shows that the event handler “onClick” is not set up yet.
So this is the issue that I haven’t seen information on the web or from Dojo source code yet. After various experiments, I realize the problem is the event name “onClick” that has an upper case “C”. Assuming that “srcArray” comes from some external sources that we don’t have control, So let’s correct function “create()” to deal with the case issue:
function test(){
for(var attrName in srcArray){
var attrValue=srcArray[attrName];
if(navigator.userAgent.indexOf("MSIE")!=-1)
{
attrName=attrName.toLowerCase();
if(attrName=="style"){
childNode.style.cssText=attrValue;
continue;
}else
if(attrName.indexOf("on")==0)
{
childNode.setAttribute(attrName, attrValue); continue;
}
}
childNode.setAttribute(attrName,attrValue);
}
parentNode.appendChild(childNode);
};
After this change, the “test()” function reports that all attributes have been set up correctly as expected. Now everything is working – until you can click on the newly created “div” area. You would expect an “alert” to be displayed, however, nothing happens. If you use Microsoft IE developer toolbar, you can actually see the “onclick” event has been set up correctly in the DOM. However, the event handler is not invoked.
So what does this mean? On Internet Explorer:
- Programmatically setting up “style” attribute must be done via “domNode.style.cssText” instead of DOM API “domNode.setAttribute()”;
- For event handlers, it seems to me that DOM API “setAttribute()” can set event handlers in the DOM, but the handler doesn’t really respond to events;
So, finally, what can we do if we want event handlers to function as intended? Here is my last trick – using “innerHTML”. Not pretty, but works. See below:
function create(){
var childHTML="<div ";
for (var attrName in srcArray){
var attrValue=srcArray[attrName];
childHTML+=" "+attrName+"=""+attrValue+""";
}
childHTML+="></div>";
alert("childHTML="+childHTML);
parentNode.innerHTML=childHTML;
};