IE vs FF Working with dynamic Tables


Today I am gonna write another thing I came across while working on Javascript.
Sometimes, even if it’s easier to work with list <li> elements in HTML, but the design department may make a
design using tables.
Well what I wanted to do was read some information and dynamically create table and assign correct info to its
rows, columns.
Lets write the basic HTML code for table element:

<table>
<tr>
<td>Row1 Column1</td>
<td>Row1 Column2</td>
</tr>
<tr>
<td>Row2 Column1</td>
<td>Row2 Column2</td>
</tr>
</table>

So, looking at the table and other tags used with table, I made those elements using the Javascript Code.
The Code used to create table is as follows:

var myTable = document.createElement("table");
var myRow = document.createElement("tr");
var myCell = document.createElement("td");
myCell.innerHTML = "Hello World!";
myTable.appendChild(myRow);
myRow .appendChild(myCell);

Now, for this Javascript, Firefox was fine, but it did not worked on IE. So, I searched on Internet and then using
Firebug I noticed one thing that we also have another element inside table as <tbody> and this was the actual problem.
On FF it makes this element and adds it to the table tag. But, IE does not.
So, the new code that worked for both IE and FF is as under:

var myTable = document.createElement("table");
var myTbody = document.createElement("tbody");
var myRow = document.createElement("tr");
var myCell = document.createElement("td");
myCell.innerHTML = "Hello World!";
myTable.appendChild(myTbody);
myTbody.appendChild(myRow);
myRow.appendChild(myCell);

And, as you can see in the code above, I am manually creating the tbody element and appending it to the table.
And, the row element is appended to this tbody element.
Finally, the problem with creating tables dynamically was solved. 🙂
May this help you when u face similar problem.
Cheers.. 🙂