やられた

tbodyタグにIDを付けておいて、Firefox3で下記のスクリプトを実行すると、

var x=document.getElementById("A");
var a=document.createElement("tr");
a.innerHTML="<td>AAAAAA</td>"; // ※1
x.appendChild(a);
var b=document.createElement("tr");
x.appendChild(b);
b.innerHTML="<td>BBBBBB</td>"; // ※2

結果として、

<table><tbody id="A">
<tr>AAAAAA</tr>
<tr><td>BBBBBB</td></tr>
</tbody></table>

という構造が出来る。※１の直後で alert(a.innerHTML) してみるとこの時点でtdタグの情報は消えている。※2の直後だとちゃんとtdの情報もある(当たり前)。

これはこういうものだろうか？と思って、IE7でやってみると、なんと※2がエラーになる。「未知の実行時エラーです」と。ググってみると、

TABLE と TFOOT と THEAD と TR 要素の innerHTML プロパティは、読み取り専用です。

やられた。そう言えばこの説明、以前に見たことあるけどすっかり忘れてました。

divにID="A"をつけておいて、下記を実行するとFirefox3でもIE7でも問題なし。うーむ。勉強になりました。

var x=document.getElementById("A");
var a=document.createElement("ol");
a.innerHTML="<li>AAAAAA</li>";
x.appendChild(a);
var b=document.createElement("ul");
x.appendChild(b);
x.lastChild.innerHTML="<li>BBBBBB</li>";

trタグなどをappendChildしたい場合は、innerHTMLにタグを書くんじゃなくてtdノードをappendChildしないといけない。

var x=document.getElementById("A");
var a=document.createElement("tr");
var b=document.createElement("td");
b.innerHTML="AAAAAA";
a.appendChild(b);
x.appendChild(a);

そもそも「innerHTML使うな」という話もあるだろうな。