「JavaScript」innerHTMLプロパティでHTML文字列を含むテキストを取得する
環境
Google Chrome 102.0.5005.63
書式
element.innerHTML
innerHTMLプロパティ を使用して、HTML文字列を含むコードをそのまま取得します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="txtshow">
<p><button>検証</button></p>
<span>html文字列</span>
</div>
<script>
// 要素への参照を取得する
var textMsg = document.getElementById('txtshow');
//コンソールにHTML文字列を表示する
console.log(textMsg.innerHTML);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="txtshow">
<p><button>検証</button></p>
<span>html文字列</span>
</div>
<script>
// 要素への参照を取得する
var textMsg = document.getElementById('txtshow');
//コンソールにHTML文字列を表示する
console.log(textMsg.innerHTML);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="txtshow">
<p><button>検証</button></p>
<span>html文字列</span>
</div>
<script>
// 要素への参照を取得する
var textMsg = document.getElementById('txtshow');
//コンソールにHTML文字列を表示する
console.log(textMsg.innerHTML);
</script>
</body>
</html>
実行結果
innerHTMLでは、HTML文字列「<p><button>検証</button></p> <span>html文字列</span>」がそのまま表示します。