JavaScriptを使ってHTMLのテキストを操作しようと思ったとき、使うものとして出てくるのが「innerHTML」「textContent」「innerText」だと思います。３つもあるけど、どれを使ったらいいの！？となることがありましたので、改めてそれぞれの特徴と用途をまとめたいと思います！
◆innerHTML
要素内のHTMLを含むすべての内容を取得または更新することができます。
HTMLタグをそのまま文字列として取得・更新できます。
JavaScriptで要素を動的に生成したい場合に便利。
ただし、外部から提供された値を直接設定すると、XSS（クロスサイトスクリプティング）の脆弱性に繋がる可能性があるため注意が必要です。
*クロスサイトスクリプティング（XSS） とは？？
攻撃者が悪意のあるスクリプトをウェブページに挿入する攻撃のこと。ユーザーがそのページを表示すると、悪意のあるスクリプトが実行され、ユーザーのデータが盗まれたり、他の悪意のある操作が行われたりする可能性があります。
◆用途
HTMLコンテンツ全体（タグを含む）を取得または更新する場合。
特に要素内のHTMLを動的に変更したい場合。
◆innerText
要素内の表示されているテキストを取得します。
ただし、CSSスタイルによって非表示になっているテキスト
（たとえば、display: noneの要素のテキスト）は含まれません。
textContentに似ていますが、ブラウザ上で
ユーザーに見えている内容のみを操作します。
見た目に依存する内容を取得したい場合に有効。
◆用途
ユーザーに表示されているテキストだけを操作したい場合。
◆textContent
要素内のテキスト内容（すべての子要素を含む）を取得または更新します。
HTMLタグは無視され、純粋なテキストのみを操作します。
HTMLとして解釈されることはないため、セキュリティリスクが少ない。
レンダリングされていない隠し要素も含めて取得します。
◆用途
HTML構造を無視して、純粋なテキストを取得・設定する場合。
まとめ
| HTMLタグ | CSSの影響 | 主な用途 | |
|---|---|---|---|
| innerHTML | 表示する | 受けない | HTML構造全体を操作する |
| textContent | 表示しない | 受けない | 純粋なテキストを取得・設定する |
| innerText | 表示しない | 受ける | 表示されているテキストを取得・設定する |
使い分けのポイント
-
HTML構造を操作したい場合
→ innerHTMLを使用（ただし、入力内容の検証を忘れずに） -
純粋なテキストを扱いたい場合
→ textContentを使用 -
表示内容に基づいて操作したい場合
→ innerTextを使用