IEで、Javascriptで動的に作成したtableタグが表示されないという問題に悩んでました。
例えばこんな感じのコードを実行してみても、何も表示されません。(IE7, IE8で確認)
<html> <body> <div id="abc"></div> <script> var table = document.createElement("table"); var tr = document.createElement("tr"); var td = document.createElement("td"); table.border = 1; td.innerHTML = "foobar!"; table.appendChild(tr); tr.appendChild(td); document.getElementById("abc").appendChild(table); </script> </body> </html>
色々ググってみたところ、tbodyタグを入れるとよいらしいです。
先程の例を修正したものは次の通り。
<html> <body> <div id="abc"></div> <script> var table = document.createElement("table"); var tbody = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); table.border = 1; td.innerHTML = "foobar!"; table.appendChild(tbody); tbody.appendChild(tr); tr.appendChild(td); document.getElementById("abc").appendChild(table); </script> </body> </html>
これでtableタグが表示されるようになります。