mootoolsのElementプロパティでテーブルを作るとき、階層を守って作らないとIEで表示されない。

見事にハマったので詳細をメモっておくことにする。

※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

たとえば、次のソースだとIEで表示されない。
HTMLソースは確認できるが、テーブルがhiddenな状態になってしまう。

var table = new Element('table');
var tr = new Element('tr').injectInside(table);
var th = new Element('th').setText('test').injectInside(tr);
var td = new Element('td').setText('sample').injectAfter(th);

原因は
table>thead>tfoot>tbody>tr>td この構造か
table>tbody>tr>td この構造を守ってないからで
trの前にtbodyを作っておく必要がある。

var table = new Element('table');
var tbody =new Element('tbody').injectInside(table);
var tr = new Element('tr').injectInside(tbody);
var th = new Element('th').setText('test').injectInside(tr);
var td = new Element('td').setText('sample').injectAfter(th);