【jQuery】要素内のテキストを設定・取得する：text() の基本

jQuery

2025.09.13

jQuery の text() メソッドは、要素内のテキストを取得したり設定したりするための基本的なメソッドです。HTML タグは解釈せず、テキストとして処理するのが特徴です。本記事では text() の使い方をサンプルコード付きで解説します。

要素内のテキストを取得する
要素内のテキストを設定する
複数要素に同時に設定する
コールバック関数で動的に設定する
html() との違い
まとめ

要素内のテキストを取得する

まずは text() を使ってテキストを取得する方法です。

<p id="msg">こんにちは、jQuery!</p>

<script>
  var text = $('#msg').text();
  console.log(text); // → こんにちは、jQuery!
</script>

この場合、<p> 要素内のテキストだけが取得され、HTML タグがあってもテキストとして扱われます。

要素内のテキストを設定する

text() に文字列を渡すと、その要素のテキストを上書きできます。

<p id="msg">初期テキスト</p>

<script>
  $('#msg').text('新しいテキストを設定しました');
</script>

実行後、表示は「新しいテキストを設定しました」に変わります。

複数要素に同時に設定する

セレクタで複数要素を選んだ場合、すべてに同じテキストを設定できます。

<ul>
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
</ul>

<script>
  $('.item').text('共通テキスト');
</script>

この場合、すべての <li> が「共通テキスト」に置き換わります。

コールバック関数で動的に設定する

text() に関数を渡すと、インデックス番号や現在のテキストを使って動的に変更できます。

<ul>
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
</ul>

<script>
  $('.item').text(function(index, oldText) {
    return '要素 ' + index + ': ' + oldText;
  });
</script>

実行後は「要素 0: A」「要素 1: B」「要素 2: C」といった表示になります。

html() との違い

text()：テキストとして処理する（HTML タグは文字列として表示される）
html()：HTML として解釈する（タグが適用される）

<p id="sample"></p>

<script>
  $('#sample').text('<strong>太字</strong>'); // タグはそのまま表示
  $('#sample').html('<strong>太字</strong>'); // 実際に太字になる
</script>