javascript console.logにhtmlをそのまま表示する

javascript console.logにhtmlをそのまま表示する

javascriptで、console.logにhtmlをそのまま表示するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 102.0.5005.63

htmlをそのまま表示

例えば「document.getElementById」で取得した要素を、そのままコンソールに出力すると
htmlでは表示されません。

<div id="foo"><sapn>mebee</sapn></div>

<script>

// 要素を取得
let element = document.getElementById("foo");

console.log( element );
// 結果 div#foo

</script>

実行結果

「html」で表示したい場合は「outerHTML」を使用します。

<div id="foo"><sapn>mebee</sapn></div>

<script>

// 要素を取得
let element = document.getElementById("foo");

console.log( element.outerHTML );
// 結果 <div id="foo"><sapn>mebee</sapn></div>

</script>

実行結果

ちなみに「document.getElementById」は省略することもできます。

<div id="foo"><sapn>mebee</sapn></div>

<script>

console.log( foo.outerHTML );
// 結果 <div id="foo"><sapn>mebee</sapn></div>

</script>