JavaScript

【JavaScript】textContentとinnerHTMLの違い

textContentとinnerHTMLは、テキストの取得と設定ができると役割が同じことからどのような違いがあるか気になった方も多いと思います。

こちらの記事では、textContentとinnerHTMLの違いについて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

文字列か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エンティティの「&lt;」「&gt;」に変換して設定します。そのため、textContentよりもinnerHTMLの方が処理が遅くパフォーマンスが低下してしまいます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村