Mehfuz Hossain
Learning never stops....

Dynamic table creation Exception In IE

Sunday, April 29, 2007 12:58 PM

Look into the following script , i have looked into it for hours , but didnt able to figure out what could possibly go wrong.

            var div = document.createElement("div");
            div.id = "myDiv"; 
            div.innerHTML = "Hello world";
            div.className = "original";
            //alert(div);
            var element =document.getElementById("targetInputBox");
           
            element.id = "Location_Box_Relative";
            var table = document.createElement("table");
      
            table.className = "GeoTable"; 
            table.setAttribute("border", "0");
            table.setAttribute("hasLayout", "1");
           
      
           var tr1 = table.appendChild(document.createElement("tr"));
           var td1 = tr1.appendChild(document.createElement("td"));
           var td12 = tr1.appendChild(document.createElement("td"));
      
          
           var tr2 = table.appendChild(document.createElement("tr"));
           var td2 = tr2.appendChild(document.createElement("td")); 
      
           td2.setAttribute("colSpan", "2");
          
           element.parentNode.appendChild(table);
          
           td1.appendChild(element);
           td2.appendChild(div);

The purpose of the script is to move a target element into a table structure. Now, the scripts works fine in Firefox, but does even render in IE 6 or 7 .  How in the world , the  same script shows in Firefox, does not even show in IE at all and does not show errors as well. Now, for dynamic element creation, to make IE show the table items,  all the table items should be nested inside a <TBODY> tag. Only , then you can see the real magic.

So the modified script becomes

            var div = document.createElement("div");
            div.id = "myDiv"; 
            div.innerHTML = "Hello world";
            div.className = "original";
            //alert(div);
            var element =document.getElementById("targetElement");
           
            var tblBody = document.createElement("tbody");
           
            element.id = "Location_Box_Relative";
            var table = document.createElement("table");
      
            table.className = "GeoTable"; 
            table.setAttribute("border", "0");
            table.setAttribute("hasLayout", "1");
            table.appendChild(tblBody);
      
            var tr1 = tblBody.appendChild(document.createElement("tr"));
            var td1 = tr1.appendChild(document.createElement("td"));
            var td12 = tr1.appendChild(document.createElement("td"));
      
          
            var tr2 = tblBody.appendChild(document.createElement("tr"));
            var td2 = tr2.appendChild(document.createElement("td")); 
      
            td2.setAttribute("colSpan", "2");
          
            element.parentNode.appendChild(table);
          
            td1.appendChild(element);
            td2.appendChild(div);

And, Tha'ts It. This is all which can make your day good :-)




Feedback

# re: Dynamic table creation Exception In IE

Call me crazy -- shouldn't that raise an error of some sort?

From DOM specs, node.appendChild:

"HIERARCHY_REQUEST_ERR: Raised if this node is of a type that does not allow children of the type"


Seems IE doesn't recognize that a TR is not a valid child of a TABLE, but instead of letting the developer know with an error or something -- no they see no error and no table -- and one must search on google to find the answer.

silly m$. 6/3/2007 5:15 AM | Tyler Waters

Post a comment





 

Please add 2 and 5 and type the answer here: