javascriptで編集されたHTMLのソースの確認方法について

お世話になります。
JavaScriptで編集したHTMLコードのソースコードを確認する方法をご存知の方いらっしゃいましたら、ご教授いただけると幸いです。
よろしくお願いします。
【実施例(抜粋)】
-main.html-
<script src="test.js" type="text/JavaScript"></script>
<div id="display"></div>

-test.js-
BHTML='動的に編集されたHTML';
$('display').innerHTML = BHTML;

上記のようなことをやろうとしているのですが、BHTMLの内容を動的に編集しており、バグの修正のために、ブラウザー上で実際にどのようなソースコードになっているのかを確認したいと考えています。
ブラウザーのソース表示機能を使用した場合、<div id="display"></div>に表示された内容のソースは表示されないようなのです。何か良い方法がありましたら、ご教授のほどよろしくお願いいたします。

No.1 回答者： ANASTASIAK 回答日時： 2007/02/24 12:49

alert($('display').innerHTML)

とか？

この回答へのお礼

ご回答をありがとうございます。
こんなに簡単に解決できるのですね。
勉強になりました。
ありがとうございました。

お礼日時：2007/02/24 20:36

No.2 回答者： suzuki-_- 回答日時： 2007/02/24 13:22

> <script src="test.js" type="text/JavaScript"></script>

> <div id="display"></div>

恐らく実際は逆になるだろうと思います(読み込み後実行でなければ)
<div id="display"></div>
<script src="test.js" type="text/JavaScript"></script>

とりあえずそれは前置きとして、いくつか考えられます

■例1 divではなくtextarea にしてしまう
html側
<textarea id="display" style="width:400px;height:10em;"></textarea>

js側
BHTML='<p>動的に編集されたHTML</p>';
document.getElementById('display').value = BHTML;

■例2 innerTextを使用(Mozilla系不可)
html側
変更なし

js側
BHTML='<p>動的に編集されたHTML</p>';
document.getElementById('display').innerText = BHTML;

■例3 タグに使われる < を置換してしまう
html側
変更なし

js側
BHTML='<p>動的に編集されたHTML</p>';
while(BHTML.indexOf("<", 0) >= 0){
BHTML=BHTML.replace("<","&lt\;");
}
document.getElementById('display').innerHTML = BHTML;

この回答へのお礼

ご回答をありがとうございます。
いろいろな方法をありがとうございます。
勉強になりました。
ありがとうございました。

お礼日時：2007/02/24 20:37

No.3 回答者： yambejp 回答日時： 2007/02/24 13:37

firefoxのツールfirebugのinspect機能を使えば生成されたソースを

htmlとして解釈して表示させられます。
ただ、自分がいれていないタグなどもご丁寧につけてくれるので
厳密に記入漏れなどをチェックすることはできませんが
firebug自体がデバッガなので、エラー箇所を細かく検証する
ことでなんとかなると思います

この回答へのお礼

ご回答をありがとうございます。
私はIEを使用しているので、
この方法は使えませんでしたが、
firefoxにはこういう便利な機能があるのですね。
すばらしいです。勉強になりました。
ありがとうございました。

お礼日時：2007/02/24 20:39

No.4 ベストアンサー 回答者： arenani_sorenani 回答日時： 2007/02/24 14:49

ブックマークレットです。

実行後のページのアドレスバーに以下の記述をコピー＆ペーストしてenterを押してみください。
現在の状態のソースを書き出します。



javascript:document.write('<xmp>'+document.documentElement.innerHTML+'<\/xmp>');





.

この回答へのお礼

ご回答をありがとうございます。
こんなすごい方法があったとは、使ってみて感激してしまいました。
Webアプリケーション開発の奥深さを痛感しました。
勉強になりました。
ありがとうございました。

お礼日時：2007/02/24 20:42