内容の変更（innerHTML, textContent）

DOMの操作（変更）: 内容の変更（innerHTML, textContent）

DOM（Document Object Model）において、要素の「内容」を変更する際によく利用されるのが innerHTML と textContent です。どちらも要素内に表示されるコンテンツを操作できますが、挙動や用途には重要な違いがあります。

---

1. innerHTML

• 役割: HTML要素の中身を「HTMLとして」取得・設定する。

• 特徴

  • 文字列をHTMLとして解釈するため、タグを含めて挿入できる。

  • 既存の子要素を全て置き換える。

  • ユーザー入力をそのままinnerHTMLに代入すると、XSS（クロスサイトスクリプティング）攻撃の危険がある。

例

html
<div id="example"></div>
<script>
  const div = document.getElementById("example");
  // HTMLタグを挿入
  div.innerHTML = "<p><strong>太字のテキスト</strong>を追加しました。</p>";
</script>

この場合、divの中には<p>タグが追加され、その中の「太字のテキスト」が強調表示されます。

---

2. textContent

• 役割: 要素の中身を「テキストとして」取得・設定する。

• 特徴

  • HTMLタグは文字列として扱われる（解釈されずにそのまま表示される）。

  • より安全に文字列を扱えるため、ユーザー入力を表示する際にはこちらを利用するのが推奨される。

  • 不要なHTMLパースがない分、innerHTMLより高速な場合が多い。

例

html
<div id="example"></div>
<script>
  const div = document.getElementById("example");
  // テキストとして挿入（タグは解釈されない）
  div.textContent = "<p><strong>テキストとして表示</strong></p>";
</script>

この場合、divにはタグを含めた文字列そのものが表示されます。つまり、画面には

css
<p><strong>テキストとして表示</strong></p>

と文字列がそのまま出力されます。

---

3. 使い分けの基準

• HTMLタグを含めて表示したい場合 → innerHTML

• 純粋なテキストだけを扱いたい場合（安全性重視） → textContent

---

まとめ

• innerHTML: HTMLを解釈して挿入、柔軟だがXSSリスクあり。

• textContent: HTMLタグを解釈せずそのままテキストとして扱う、安全で高速。