JavaScript

【初心者向け】JavaScriptで要素内のテキストを操作する方法

JavaScriptを使って要素にテキストを挿入する場合は、主に以下の2つの方法で行います。

// 要素の取得
const element = document.querySelector("<対象の要素のセレクタ>");

// テキストを入れる方法 ①
element.textContent = "ここに挿入したいテキストを入力";

// テキストを入れる方法 ②
element.innerText = "ここに挿入したいテキストを入力";

結論から言うと、innerTextを使用するのがおすすめです。

textContent プロパティ

恐らく最も使用頻度の高い方法が、このtextContentプロパティを用いる方法です。

以下のように記述するだけで、簡単に要素内の文字を変更することができます。

<!-- テキストを挿入する対象 -->
<h1>ここに文字を入力</h1>

<!-- ▼ JavaScript -->
<script>
  // 要素の取得
  const element = document.querySelector("h1");

  // テキストを入れる方法 ①
  element.textContent = "textContentプロパティを使ってテキストを挿入しました！";
</script>

ちなみに、要素内のテキストを空にしたい場合は、textContentプロパティに空文字列を入れることで実現できます。

// テキストを入れる方法 ①
element.textContent = "";

innerText プロパティ

innerText用に見出しを作っておいて何ですが、実装方法はtextContentの場合と全く同じです。

<!-- テキストを挿入する対象 -->
<h1>ここに文字を入力</h1>

<!-- ▼ JavaScript -->
<script>
  // 要素の取得
  const element = document.querySelector("h1");

  // テキストを入れる方法 ②
  element.innerText = "innerTextプロパティを使ってテキストを挿入しました！";
</script>

こちらも、textContentと同様に空文字を入れることができます。

textContent と innerText の違いは？

textContentとinnerTextは、どちらも同じような書き方・処理で要素内のテキストを変更することができます。

ただ、別々のプロパティなので、若干その仕様にも違いはあるのです。

例えば、以下のような要素の中に書かれているテキストを取得したいとします。

<h1>
  <style>
    h1 {
      color: aqua;
    }
  </style>
  ここに文字を入力
</h1>

textContentとinnerTextは、Elementオブジェクトが持っているプロパティなので、値を代入せず、そのまま呼び出すと、要素内にある文字列を取得できます。

では、以下のようにして、h1タグの中にある文字列を取得できるかどうか、試してみましょう。

// 要素の取得
const element = document.querySelector("h1");

// textContentでテキスト取得
console.log(element.textContent);

// innerTextでテキスト取得
console.log(element.innerText);

恐らく、以下のような結果になるはずです。

textContentの様子が変ですね。

textContentプロパティの場合、<style>タグなど、明確に文字列ではない部分を抜いた分のテキストを値として保持します。

つまり「文字列を編集する」という観点で見ると、styleタグの中身は画面に表示されない部分なのですから、画面に表示されない文字も対象になってしまうtextContentはテキスト操作と相性が良くありません。

一方のinnerTextプロパティは、本当に文章の部分だけが対象となっています。

画面に表示される「ここに文字を入力」という部分だけ操作できるため、テキスト編集に使用するならinnerTextプロパティを使う方がおすすめです。

ちなみに、上記の状態のまま、textContentプロパティでテキストを操作しようとすると、当然ながらstyleの中身も上書きされてしまいます。

<!-- テキストを挿入する対象 -->
<h1>
  <style>
    h1 {
      color: aqua;
    }
  </style>
  ここに文字を入力
</h1>

<!-- ▼ JavaScript -->
<script>
  // 要素の取得
  const element = document.querySelector("h1");

  // textContentでテキスト取得
  element.textContent = "テキストを挿入！"
</script>

まとめ

正確にテキストを操作するならinnerTextを使うべきですが、textContentでも問題がないケースがほとんどなので、はっきり言って違いさえ理解して、問題がないと判断できているなら、どちらを使っても問題ないです。