Dynamic table creation Exception In IE

Comments (2) | Share

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 :-)