javascriptのdocument.write()がうまく動かない

最近ではあまりdocument.write()なんて使わなくなりましたね。
jQueryを使っているならappend()で後から置き換えるという方が普通でしょうし。
でも、この間書いていたスクリプトで、とある事情からdocument.write()を使わなくてはいけなくて、後から考えれば馬鹿な間違いなのですが、ちょっとやっちまったのでメモ。
（そもそも、document.write()以外の方法もあったかもしれないけど、その辺は置いといて）


jQueryで$(function(){});の中に命令をいろいろ書いていたのですが、その中にdocument.write()を追加したとたん、動きがおかしくなった。document.write()で書き出したもの以外がすべて消えてしまうんですね。
ブラウザごとに挙動は違うかもしれませんが、原因は一緒。
$(function(){});の本来の意味を考えればすぐ分かる話な訳で。

$(function(){});は、その中に書かれた命令文を、ページの読み込み終わった段階で実行します。DOMが操作可能になった段階ですね。
つまり、ページがもうできあがってからスクリプトが走ると言うことです。

これは重要なことで、スクリプトが操作したいDOM要素が読み込まれる前に（準備ができる前に）操作を開始しようとすると、「オブジェクトがない（undefined）」のエラーが出てしまいます。
jQueryでは、ページに対して後から動的に操作する場合が多いと思いますので、 $(function(){});の中に書くわけですね。

これをもう、ほとんど無意識にやっていたもんで、ちょっとポカをやったわけです。
document.write()は、引数で指定された文字列をHTML内に書き出す命令ですが、ページ自体ができあがった状態になった後に書き出そうとしたらダメに決まってます。
ページを作る途中に、必要なタイミングで書き出しをしていかないと行けないですよね。
そんなわけで、document.write()した以外のものがすべて消えるという現象は、ページ読み込みが終わった後に別の文字列を書き出したことにより、それまでのものが全部消えたということだと思います。

jQueryとdocument.write()が併用できないわけではもちろん無く、$(function(){}); 内で使ってはいけないということですね。
これは昔ながらのonloadでも同じことです。