Thursday, October 08, 2009

Rendering a TABLE inside a DIV in IE problem

I've just head a rendering problem on IE (IE8). It doesn't happen in static HTML, but it only happens in generating HTML by using JavaScript dynamically. I did as below:

  
var myDiv = document.getElementById('myDiv');
var table = document.createElement('table');

myDiv.appendChild(table);

var tr = document.createElement('tr');
table.appendChild(tr);

var centerTd = document.createElement('td');
centerTd.innerHTML = 'Hello guys';
tr.appendChild(centerTd);

'Hello guys' doesn't show up even the DIV is there. If I try to create a static HTML inside 'myDiv' DIV, the text shows up. Strange!

Just a try, I add TBODY to wrap the table's body. And then, the text shows up. IE sucks.

var myDiv = document.getElementById('myDiv');
var table = document.createElement('table');

myDiv.appendChild(table);

var tbody = document.createElement('tbody');
table.appendChild(tbody);

var tr = document.createElement('tr');
tbody.appendChild(tr);

var centerTd = document.createElement('td');
centerTd.innerHTML = 'sfsdfsdfsdfsd';
tr.appendChild(centerTd);

Note: This problem doesn't happen on Firefox.