（注：このブログはもう更新していません）この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

[クラウド帳票エンジンDocurain]

IEで動的に作成したtableタグが表示されない？

Javascript


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タグが表示されるようになります。