【JavaScript】IE6でTABLE要素内をHTMLで書換える関数

IE6でTABLE/THEAD/TFOOT/TR要素内をHTML表記で書換えることができるような関数を作ってみました。

element.innerHTML='(HTML)';

とする代わりに、

replaceInnerHtml(element,'(HTML)');

として使用します。

上記要素以外の場合でも使えると思います(HEADとかBODYなどはダメですが)。

function    replaceInnerHtml(tgtElm, innerHTML) {
    for (;;) {
        if (typeof innerHTML!='string'||typeof tgtElm!='object'||tgtElm.nodeType!=1/*ELEMENT_NODE*/) break;
        try {
            tgtElm.innerHTML=innerHTML;
        }
        catch (e) {
            var chld;
            while (chld=tgtElm.firstChild) tgtElm.removeChild(chld);    //  remove all child elements
            if (innerHTML.match(/^\s*$/) ) break;   //  clear only
            
            var tagName=tgtElm.tagName.toLowerCase(), tmp, html='<'+tagName+'>'+innerHTML+'</'+tagName+'>';
            switch (tagName) {
                case    'thead' :
                case    'tbody' :
                case    'tfoot' :
                    tmp=document.createElement('table');
                    replaceInnerHtml(tmp, html);
                    break;
                case    'tr'    :
                    tmp=document.createElement('table');
                    replaceInnerHtml(tmp, '<tbody>'+html+'</tbody>');
                    tmp=tmp.firstChild;
                    break;
                default         :
                    tmp=document.createElement('div');
                    tmp.innerHTML=html;
                    break;
            }
            var tmpElm=tmp.firstChild;
            while (chld=tmpElm.firstChild) tgtElm.appendChild(chld);
        }
        break;
    }
    return tgtElm;
}

【テーブル置換サンプル】

THEAD要素
下のボタンを押して試して下さい。
TFOOT要素

【HTML】

【JavaScript】IE6におけるtable要素の初期化で、TABLE要素のinnerHTMLを直接書換えようとするとIE6ではエラーになってしまうと書きましたが、Microsoftによるとこれはやはり『仕様』とのこと。
■PRB: Internet Explorer に Table.innerHTML を設定しているエラー

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

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

仕様といわれてしまってはそれまでですが、やっぱり直接書換えたいような場合もあるんじゃないかなぁ、と思って上記のような関数を作成してみたしだい。

余談ですが、リンク(A)要素のinnerHTMLはIE6でも通常は書き込み可能ですが、

linkElement.innerHTML='<a href="http://～">hoge</a>';

のようにすると『未知の実行時エラーです。』と出ることに、『りんくぽっぷ』を作っていて気が付きました。

まぁ、リンク要素内にリンク要素を書くようなことは推奨されないとは思うんですが。Wikipediaなんかで実際にこうなっていたりする箇所があって、りんくぽっぷでエラーが出てしまい、原因究明にてこずりました(苦笑)。

【2007/12/09追記】
この話題、以前どっかで読んだ覚えがあったのですが、
未知の実行時エラー
でした。