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を使用