今回から数回に分けて、 作成したレイアに HTML を出力する際の食えない事情を取り上げます。

　その第１回は出力方法についてです。

---

　レイアへの HTML の出力は NN では document.write メソッドを使用します。
これは NN のオブジェクト構造を考えれば至極当然のように思えます。

また、 IE のレイアにも document プロパティがあります。
では、同様に document.write は有効でしょうか？
答えは「否」です。 　つまり、レイアの document は body の document と同じオブジェクトを示すので、 ページ全体を書き換えることになります。

レイアの内容は innerHTML プロパティに格納されています。 このプロパティに書き込めば反映されるでしょうか？
答えは「条件付」です。

div.innerHTML = '<H1>Hello! World</H1>';

は正常に実行されます。
NN で document.write を使用する際分割して出力するのと同様に分割して

div.innerHTML = '<H1>';
div.innerHTML+= 'Hello! World';
div.innerHTML+= '</H1>';

とすると「Hello! World」の文字サイズは H1 になりません。 これは IE がTABLE タグが閉じていなくても表示されるのと同様に 不完全なタグを補完するために実行結果が

div.innerHTML = '<H1>';          → '<H1></H1>'
div.innerHTML+= 'Hello! World';  → '<H1></H1>Hello! World'
div.innerHTML+= '</H1>';         → '<H1></H1>Hello! World<H1></H1>'

となるためです。 これは write メソッドを使用する時のように open/close により出力された データの評価タイミングがないため、書き込みのたびにデータの評価が行われるように見えます。 つまり、どれだけ長い HTML でもタグのペアが完全でなければならないことを意味します。

では、使用しているタグについて完全であれば分割して出力することができるでしょうか？
答えは、やはり「条件付」です。

div.innerHTML = '<div id="d1"></div>';
div.innerHTML+= '<div id="d2"></div>';

というように２つのレイアを生成することを考えてみましょう。
この命令は最終的には２つのレイアが生成されるので一見いいように思えます。

div.innerHTML = '<div id="d1"></div>';
d1=document.all('d1');
div.innerHTML+= '<div id="d2"></div>';
d2=document.all('d2');

とすると最初に取得したレイア d1 は最終的には無効なオブジェクトになります。 つまり、innerHTML に対するデータの更新が

div.innerHTML+= '<div id="d2"></div>';

であっても

div.innerHTML = div.innerHTML + '<div id="d2"></div>';

と同義であるために以前のオブジェクトは破棄され、 新たに全てのオブジェクトが生成されるためです。

これを避けるには insertAdjacentHTML メソッドを使用します。 前述の例では

div.insertAdjacentHTML('BeforeEnd','<div id="d1"></div>');
d1=document.all('d1');
div.insertAdjacentHTML('BeforeEnd','<div id="d2"></div>');
d2=document.all('d2');

となります。

ここまで来ると、 レイアにある document, innerHTML プロパティの存在意義はなんなのかはなはだ疑問です （ 厳密には多少の意義があるのですが... ）。

特に気になるのは、このオブジェクト構造だとネスト構造のレイアの最下層のレイアの内容を 書き換えると、その祖先の全てのオブジェクトの innerHTML の内容の更新が発生する と思われることです。

「IE は遅い！」と言われる理由の一旦がここにもある。
と思いませんか？

ってことで、......
え？ IE5 に関する新しい「食えない事情」は？って？
ん〜。そんじゃぁ、「おまけ」ってことで... f(^^;

上の例で insertAdjacentHTML で出力する HTML を '<p><hr>' で 始まるようにしてみて下さい。 不思議と「JavaScript エラー」になります。

つづく