IEでinnerHTMLを変更できない場合がある - ヒルズで働く@robarioの技ログ

Prototype.jsのElement.update読んだらちゃんと対策されてた。

だそうです。

久々に「ハメられた！」という気分になりました。
ビューとモデルを分離するために、昨日JavaScript版簡易Template-Toolkitをちょろっと書いて使っていました。その時点では上手く動いていたのですが、今日テストをしていたところIEで意味不明なエラーが出て実行できませんでした。そのエラーメッセージはなんと「不明なランタイムエラー」。。。
・・・(ノ＃ﾟДﾟ)ノ　＝＝＝＝　┻━━┻
まさに意味不明なランタイムエラーです。

このテンプレートもどきは、指定した要素のinnerHTMLをごにょごにょ書き換えています。Googleで「IE 不明なランタイムエラー」を検索すると・・・

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

そんなもん知るかーー！！っていうかさっき「不明なランタイムエラー」と言った割には、はっきり原因分かってますやん・・・＞IE

自分は基本的にDOMでごにょごにょやるタイプなのですが、今回はgetElementById('template').innerHTML.replace()をしていたので引っかかってしまいました。
これを回避するには、getElementById('template')がtable,tfoot,thead,trだったら
1. getElementById('template').innerHTMLを取り出す
2. 1で取り出したテンプレートをreplace()で置き換え
ここまでは通常通りの処理。このあと、
3. getElementById('template')をremoveChildで空にする
4. テンプレートを走査して、トップレベルの要素をHTMLElementに変換
　例えばgetElementById('template')がtrだったら、テンプレート内トップレベルのtdやthを
　テンプレートから削除して、
　 document.createElement()して
　 getElementById('template')にappendChild

って面倒くさそう・・・。おとなしくどこやらのテンプレートライブラリを使った方がいいか・・・。

状況
この動作は、仕様です。

あぁ、そうでしょうね！