jQuery でテキストを変更する方法

jQuery の text() メソッドを使うと、選択した要素内のテキストを読み取ったり、新しいテキストを設定したりできます。引数なしで .text() を呼び出すと読み取り、文字列を渡すと選択した要素のテキスト内容を置き換えます。

jQuery の text() メソッド

引数なしの .text() はゲッターで、一致した要素のテキスト内容をまとめて返します。たとえば、ページに <p id="line">It's a line.</p> がある場合、$('#line').text() は It's a line. を返します。この呼び出しは現在のテキストを読み取るもので、値を設定するものではありません。

値を渡すと、.text(value) はセッターになります。一致したすべての要素のテキスト内容を更新し、メソッドチェーンに使えるよう jQuery コレクションを返します。値はテキストとして扱われるため、<strong> のようなマークアップ文字列は HTML として解析されず、文字列のまま表示されます。マークアップを設定する場合に限り .html() を使い、信頼できない入力を安全に処理してください。

jQuery の text() メソッドでテキストを直接変更する

ブラウザー上のページでは、jQuery を読み込み、ドキュメントの準備ができてからセッターを実行します。次の Node の例では、ページと jQuery の選択処理を簡単な代替オブジェクトで再現しているため、同じ呼び出しを単独で実行できます。最初は「Text」を含む段落から始め、テキストを設定して結果の値を出力します。

const document = {};
const elements = { '#title': { text: 'Text' } };

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#title').text('New Text');
});
console.log($('#title').text());

New Text

実際のページでは、<p id="title">Text</p> を用意し、準備完了コールバック内で同じセッター $('#title').text('New Text') を使います。コールバックが実行されると、段落には「New Text」と表示されます。Node の代替例はメソッドの呼び出し方を示すものです。ブラウザーで使うページでは jQuery を読み込む必要があります。

jQuery の text() メソッドでクリックイベント後にテキストを変更する

クリック後にテキストを更新するには、ボタンにハンドラーを登録し、その中で対象の段落に .text() を呼び出します。次の自己完結型の Node の例では、段落とボタンをモデル化し、登録したハンドラーを呼び出してクリック前後のテキストを示します。

const document = {};
const elements = {
  '#title': { text: 'Text' },
  '#press': {}
};
const handlers = {};

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    },
    click(callback) {
      handlers[selector] = callback;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#press').click(function() {
    $('#title').text('Text Altered');
  });
});

console.log($('#title').text());
handlers['#press']();
console.log($('#title').text());

Text
Text Altered

ブラウザーでは、<p id="title">Text</p> と <button id="press">Text Change</button> を用意し、スクリプトより先に jQuery を読み込んでからハンドラーを使います。段落には最初「Text」と表示され、ボタンをクリックすると「Text Altered」に変わります。ハンドラーが意図した段落を更新できるよう、セレクター内の ID をページ要素の ID と一致させてください。