table要素作成 まとめ。

<table>
 <thead>
  <tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr> 
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
 </tbody>
 <caption></caption>
</table>

こういうのを作りたい。
DOM Level2に独自のHTMLTableElementとか、いろいろあるので、
それを使う。

まずは、

var table = document.getElementsByTagName("table").item(0);
か
var table = document.createElement("table");

で、ノード取得。
thead要素は

var thead = table.createTHead();

で、ノード取得して、
やりたい数だけ、

var tr = thead.insertRow(-1);
var td = tr.insertCell(-1);
td.appendChild(document.createTextNode("hogehoge"));

thead要素終了。ここで気をつけてほしいのが、
insertCellとか、insertRowはappendChildと違って、
結合した後のノードをさすので、間違えないように。
tfootとかも同じ。

お次はcaption要素。この要素も専用のメソッドがあって、

var caption = table.createCaption();

あとは通常の要素と同じようにすればよい。
documentFragment使うなりお好きなようにどうぞ。

最後にtbody要素。此方の要素はなぜか、専用のメソッドがないので、

var tbody = document.createElement("tbody");
var tr = thead.insertRow(-1);
var td = tr.insertCell(-1);
td.appendChild(document.createTextNode("hogehoge"));

基本はこんな感じで。

これで、tableのノードを新規作成した場合は

[張り付けたい親ノード].appendChild(table);

でＯＫ♪