JavaScript textContentとinnerHTMLの違い

textContentとinnerHTMLの違いのまとめ

	値の設定	値の取得	用途
textContent	入力した内容はテキストとして扱われる（タグは無効化され文字として表示）	文字列（タグは無視）を返す	テキストだけを扱いたいとき
innerHTML	入力した内容はHTMLとして解釈される（タグは有効）	HTML文字列を返す	HTMLタグを含めた要素を挿入/編集したいとき

innerHTMLは、XSS等の悪意あるスクリプトが埋め込まれると実行されてしまう可能性があるため注意が必要です。

動きで確認するサンプル

ボタンを押して下さい

textContentは、htmlのタグを文字としてそのまま出力します。
textContentを押すと、bタグは<b>という文字で表示されます。

innerHTMLは、htmlのタグを解釈して出力します。
innerHTMLを押すと、bタグはhtmlとして解釈されます。bタグは表示されません。

動きで確認するサンプルのコード

上記サンプルのコードです。

<p id="p1">ボタンを押して下さい</p>
<input type="button" value="textContent" onclick="clickBtn1()">
<input type="button" value="innerhtml" onclick="clickBtn2()">

<script>
function clickBtn1(){
	const p1 = document.getElementById("p1");

	p1.textContent = "<b>ボタンを押しました</b>";
}
function clickBtn2(){
	const p1 = document.getElementById("p1");

	p1.innerHTML = "<b>ボタンを押しました</b>";
}
</script>

9行目は、textContentプロパティです。タグは文字として表示します。
14行目は、innerHTMLプロパティです。タグをHTMLとして解釈して表示します。