動的に作成したtableタグにtheadを設定する

Javascriptでtableを動的に作成する場合、IEではtbodyが必要。

で、今度はtheadを突っ込もうとしたら、またもやIEだけエラーになる。

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

table.innerHTML =
    "<"+"thead>" + 
        "<"+"tr>" +
            "<"+"th>" + "ほげほげ" + "</"+"th>" +
        "</"+"tr>" +
    "<"+"/thead>";

IE8から開発者ツールが搭載され、Javascriptのエラーがかなり詳細に判明するようになった。
デバッガで追っかけてみたところ、「実行時のエラーです」という意味不明なエラーが。

仕方ないのできちんとDOMを使ったコードに直したら、IEでもちゃんと動くようになった。

var tableElem = document.createElement("table");
var theadElem = document.createElement("thead");
var trElem = document.createElement("tr");
var tdElem = document.createElement("td");

tableElem.appendChild(theadElem);
theadElem.appendChild(trElem);
trElem.appendChild(tdElem);

tdElem.innerHTML = "ほげほげ";

ヤレヤレ。