textContentとinnerHTMLは、テキストの取得と設定ができると役割が同じことからどのような違いがあるか気になった方も多いと思います。
こちらの記事では、textContentとinnerHTMLの違いについて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
文字列かHTMLとして表示させるか
textContentとinnerHTMLは、設定した文字列をそのまま文字列として表示させるか、それともHTMLとして表示させるかの違いがあります。
下記のサンプルコードと実行結果は、textContentとinnerHTMLを比較したものになります。id="sample1"></p>
<p id="sample2"></p>
<script>
const sample1 = document.getElementById('sample1');
const sample2 = document.getElementById('sample2');
sample1.textContent = '<span style="color:red;">textContentプロパティ</span>';
sample2.innerHTML = '<span style="color:red;">innerHTMLプロパティ</span>';
</script>
実行結果
<span style=”color:red;”>textContentプロパティ</span>
innerHTMLプロパティ
実行結果を確認すると、textContentで表示させた文字列はspanタグが文字列として表示されているのに対して、 innerHTMLで表示させた文字列はspanタグがHTMLとして表示され文字の色が赤色になっていることが確認できます。
textContentとinnerHTMLの使い分け
HTMLタグを含まない文字列を表示させたい場合はtextContentを使い、HTMLタグを含む文字列を表示させる場合はinnerHTMLを使うようにしましょう。
たまに文字列だけを表示させるのにinnerHTMLを使っていることを見かけますが、これは極力避けましょう。
innerHTMLは、「<」「>」などの文字を含む文字列が設定されている場合、HTMLエンティティの「<」「>」に変換して設定します。そのため、textContentよりもinnerHTMLの方が処理が遅くパフォーマンスが低下してしまいます。