JavaScriptによって出力されたHTMLのコードを確認する - DocumentWrite や innerHTMLで設定されたコード内容を確認する - JavaScript

JavaScriptで出力されたコードは、Webページのソースコードには表示されません。しかし、デバッグ時にはどのようなコードが出力されたか確認したいことがあります。この記事ではJavaScriptで書きだされたHTMLのコードを確認する方法を紹介します。

動作の確認

動作確認のため以下のコードを準備します。

コード

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="docwrite.js"></script>
</head>
<body onload="execdocwrite();">
  <div>HTMLで記述されたセクションです。</div>
  <div id="ActiveDoc"></div>
  <div>こちらもHTMLで記述されたセクションです。</div>
</body>
</html>

docwrite.js

function execdocwrite() {
    target = document.getElementById("ActiveDoc");
    target.innerHTML = "<div style=\"background-color:#feffac;border: solid 2px #f1b500;\">"
        + "JavaScriptで書き出したセクションです</div>";

}

解説

HTMLページが表示されると、onloadによりexecdocwrite()関数を実行します。execdocwrire()関数で"ActiveDoc"のIDを持つタグにHTMLのタグを出力しページ表示後に動的にコンテンツを表示します。

表示結果

Webブラウザを開いて、作成したindex.htmlファイルを開きます。下図の表示結果となります。黄色部分がJavaScriptによって書きだされたHTMLのコードです。

ページのソースを表示します。元のHTMLファイルのコードが表示されます。ページ表示後にJavaScriptによって書きだされたコードは表示されていないことがわかります。

JavaScirptで出力されたコードの確認方法

Internet Explorer 11の場合

Internet Explorer 11では、開発者ツールを用いるとJavaScriptで出力したコードを確認できます。[ツール]メニューの[F12 開発者ツール]を選択します。またはF12キーを押します。

開発者ツールが画面下部に表示されます。画面下部の左側のメニューの一番上の"DOM Explorer"をクリックします。DOM Explorerのコード領域に現在表示されているページのHTMLコードが表示されています。コードを確認するとJavaScriptで出力されたコードも表示されていることがわかります。