【JavaScript】textContentとinnerHTMLの違い

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

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

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

• 誰でも分かるように嚙み砕いて説明してくれる
• アニメーションの知識が深く学べる
• 1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/11/24 15:27時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

文字列か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>

実行結果を確認すると、textContentで表示させた文字列はspanタグが文字列として表示されているのに対して、　innerHTMLで表示させた文字列はspanタグがHTMLとして表示され文字の色が赤色になっていることが確認できます。

textContentとinnerHTMLの使い分け

HTMLタグを含まない文字列を表示させたい場合はtextContentを使い、HTMLタグを含む文字列を表示させる場合はinnerHTMLを使うようにしましょう。

たまに文字列だけを表示させるのにinnerHTMLを使っていることを見かけますが、これは極力避けましょう。

innerHTMLは、「<」「>」などの文字を含む文字列が設定されている場合、HTMLエンティティの「&lt;」「&gt;」に変換して設定します。そのため、textContentよりもinnerHTMLの方が処理が遅くパフォーマンスが低下してしまいます。