JavaScriptのinnerHTMLとtextContentの違いを理解しよう｜初心者向けDOM操作解説

1. innerHTMLとtextContentは何をするもの？

1. innerHTMLとtextContentは何をするもの？

JavaScriptのDOM操作では、HTML要素の中身を読み取ったり、 書き換えたりすることができます。 そのときによく使われるのが innerHTMLとtextContentです。

どちらも「要素の中身」を扱いますが、 HTMLとして扱うか、文字だけとして扱うかが大きな違いです。 これは初心者が最初につまずきやすいポイントです。

2. innerHTMLとは？

2. innerHTMLとは？

innerHTMLは、要素の中にある HTMLそのものを文字として取得・設定する仕組みです。 タグも含めて扱うのが特徴です。

たとえるなら、箱の中に入っている 手紙と飾りを丸ごと取り出すようなイメージです。

const box = document.getElementById("box");
box.innerHTML = "<strong>こんにちは</strong>";

この場合、「こんにちは」は太字として表示されます。 HTMLタグがそのまま解釈されるため、見た目が変わります。

3. textContentとは？

3. textContentとは？

textContentは、 要素の中の文字だけを扱うための仕組みです。 HTMLタグはすべて無視され、純粋な文章として扱われます。

こちらは、箱の中の文字だけを読み上げて、 飾りや装飾は見ないイメージです。

const box = document.getElementById("box");
box.textContent = "<strong>こんにちは</strong>";

実行結果では、タグも含めてそのまま文字として表示されます。 見た目は変わらず、安全に文字を表示できます。

4. 表示結果の違いを比べてみよう

4. 表示結果の違いを比べてみよう

innerHTMLはHTMLとして解釈されるため、 デザインを動的に変えたいときに便利です。

一方でtextContentは、 表示する文字がそのまま出るため、 ユーザー入力を表示するときに向いています。

この違いを理解していないと、 意図しない表示やエラーにつながることがあります。

5. 安全性の違いも重要なポイント

5. 安全性の違いも重要なポイント

innerHTMLはHTMLをそのまま実行するため、 悪意のあるコードが混ざると問題が起きる可能性があります。 これをセキュリティの問題と呼びます。

textContentは文字としてしか扱わないため、 初心者にはこちらの方が安全で安心です。 まずはtextContentを基本として覚えるとよいでしょう。

6. どちらを使えばよいかの考え方

6. どちらを使えばよいかの考え方

見た目を含めてHTMLを操作したい場合はinnerHTML、 文章だけを表示したい場合はtextContent、 という使い分けが基本です。

JavaScriptのDOM操作では、 目的に応じて道具を選ぶことが大切です。 まずは違いを理解することが第一歩になります。