javascript console.logにhtmlをそのまま表示する
- 作成日 2022.06.02
- 更新日 2022.12.14
- javascript
- javascript
javascriptで、console.logにhtmlをそのまま表示するサンプルコードを記述してます。「outerHTML」を使用して「html」にしてから表示します。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 108.0.5359.99
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>
