JavaScript Tip/Trick: 動態建立Table時，在IE中需要注意的一個問題

A small trick when creating table dynamically with javascript.

下面這種方式可以建立table，並附加到Dom樹中，但是在IE中是不顯示的：

var table = document.createElement("TABLE");

var tr = document.createElement("TR");

var td = document.createElement("TD");

var text = document.createTextNode("testt");

td.appendChild(test);

tr.appendChild(td);

table.appendChild(tr);

document.body.appendChild(table);

不報錯，用Dom查看器也可以看到整個table被完整建立了，並附加到body裡面，但就是不顯示。這是因為在IE裡不允許將tr直接附加到table裡，而要先將tr附加到tbody中，然後再將tbody附加到table下。所以正確的應該是：

var table = document.createElement("TABLE");

var tbody = document.createElement("TBODY");

var tr = document.createElement("TR");

var td = document.createElement("TD");

var text = document.createTextNode("testt");

td.appendChild(test);

tr.appendChild(td);

tbody.appendChild(tr)

table.appendChild(tbody);

document.body.appendChild(table);

FireFox中不存在這個問題。需要注意的是顯性的利用HTML構造table時，tbody元素不是必須的，可能IE在解析的時候會自動加入tbody吧，否則就解釋不通了？