JavascriptでDOMをいじってelementを追加したりした場合に、どのようなソースになっているのか気になります。
そんなときにソースをみるツールです。
SourceViewなどというような名前にすれば良かったのですが、
この関を表示させたいHtmlに記述しなければならないので、showMe()という名前にしました。
サンプル
上のボタンを押してサンプルページを開いてください。
”テキストの追加”、"ソースの表示"という２つのリンクがあります。
ソースの表示をクリックすると別窓に現時点でのソースを表示します。
テキストの追加は、自分自身に赤いxillionという文字を追加します。
何度か押した後でソースの表示をクリックしてみましょう。
ちゃんとソースに反映しているでしょ。
ブラウザからのソース表示と比べてみてね。
var newText = document.documentElement.innerHTML
newText = newText.replace(/</g,"<");
newWin.document.write(newText);
コアな部分は上のとおり。
document.documentElementはHtmlを表すDOMです。
そのinnerHTMLを取得します。
最終的にはdocument.writeメソッドで表示させているので、その前に特殊文字を置き換えます。
上の例では、開始タグのみですが、
実際のサンプルでは、&、改行、連続するスペースも置き換えています。
見た目の整形のためなのでそれほど細やかなものは不要だと思います。
サンプルからshowMe()をコピーして使ってください。