InternetExplorerではJavascrptでcheckboxのchecked属性はドキュメントに要素を追加したあとでないとできないらしい

JavaScriptを書いてFirefoxあたりで確認して動作したと安心してはいけない。この安心がいつもの落とし穴。
InternetExplorer6という難攻不落の城の攻略がまだである。
InternetExplorer6で動作させてみる。そして、動かない。いつものことである。

こんなことが日々繰り替えされているけど、今回もまたである。

JavaScriptで

var Element1=document.createElement("input");Element1.id = "e1";Element1.type="checkbox";Element1.checked=true;document.createElement("body").appendChild(Element1);

上のような感じで書いたのですけど、なぜかInternetExplorerでチェックされた状態で要素が追加されない。
要素を追加した後の属性の変更を許可するということらしい。
それで上のソースをInternetExplorerで動作させるには

var Element=document.createElement("input");Element.type="checkbox";document.createElement("body").appendChild(Element);Element.checked=true;

とすると動作する。

また、

var Element1=document.createElement("div");Element1.id = "e1";var Element2=document.createElement("input");Element2.id = "e2";Element2.type="checkbox";Element1.appendChild(Element2);Element2.checked=true;document.createElement("body").appendChild(Element1);

親要素もjavascriptで新たに追加する場合、上のようなソースの書き方の場合、InternetExplorer6ではチェックが入らない。InternetExplorer7ではチェックがはいります。

InternetExplorer6でも動作させるには要素を作った時点でDOMに追加するといい感じです。

var Element1=document.createElement("div");Element1.id = "e1";document.createElement("body").appendChild(Element1);var Element2=document.createElement("input");Element2.id = "e2";Element2.type="checkbox";Element1.appendChild(Element2);Element2.checked=true;

これから推測するところはInternetExplorer6はブラウザ上に表示されてからcheckboxのchecked属性は変更できる。
InternetExplorer7はJavaScript内部で要素を作り出せた時点でcheckboxのchecked属性は変更できるということになるのでしょう。ちなみにInternetExplorer8では比較してないのでわからないけど、InternetExplorer7と同じ動作かなと思います。

参考にしたサイト
http://motivation.drivendevelopment.jp/2009-03-16-1.html
http://smil.exblog.jp/5349616/

ちなみに、上のコードは自分で書いたコードからすこし変更を加えて、変更を加えたあとは動作チェックしていませんので、あしからず。