jQueryでテキストを追加・変更する方法｜append・prepend・textの違いを解説

jQueryでテキストを追加したいとき、append()とtext()のどちらを使うべきか迷うことがありますよね。

元の文章を残して後ろへ追加するならappend()、前へ追加するならprepend()、中身を置き換えるならtext()を使います。

この記事では、追加と変更の違い、text()とhtml()の使い分け、フォーム入力を安全に表示する方法まで、実際のコードと表示結果で解説します。

jQueryでテキストを操作する方法の結論

append()とprepend()でテキストを追加する

まず、追加先となる文章をindex.htmlへ用意します。

<p id="message">元の文章</p>

jQuery本体を読み込んだ後のscript.jsへ、次のコードを追加してください。

jQuery(function ($) {
  $('#message').prepend('先頭： ');
  $('#message').append(' ：末尾');
});

prepend()は対象要素の中の先頭、append()は末尾へ追加します。どちらも元の文章は残ります。

text()でテキストを変更する

text()へ文字列を渡すと、対象要素の中身を新しいテキストへ置き換えます。追加ではないため、古い内容は残りません。

<p id="notice">古いメッセージ</p>

jQuery(function ($) {
  $('#notice').text('新しいメッセージ');
});

引数なしのtext()は現在の文字を取得する

text()に値を渡さない場合は、選んだ要素のテキストを取得します。

jQuery(function ($) {
  const message = $('#notice').text();
  console.log(message);
});

text()とhtml()の違い

text()はタグのような文字もそのまま表示します。一方、html()は文字列をHTMLとして解釈します。

$('#text-result').text('<strong>重要</strong>');
// 画面には <strong>重要</strong> と文字で表示

$('#html-result').html('<strong>重要</strong>');
// 画面には太字の「重要」と表示

単なる文章を表示するならtext()、自分で用意した信頼できるHTMLを反映する場合だけhtml()を使うと安全です。

入力値はtext()で安全に表示する

フォーム入力やAPIの値をHTML文字列へ直接つなぐと、意図しないタグやスクリプトが実行される危険があります。利用者が変更できる値はtext()へ渡してください。

<input id="name" type="text">
<button id="show-button" type="button">表示する</button>
<p>表示結果：<span id="result"></span></p>

jQuery(function ($) {
  $('#show-button').on('click', function () {
    const inputText = $('#name').val();
    $('#result').text(inputText);
  });
});

画像のように<strong>を含む値でも、太字タグとして実行せず文字として表示されます。

変数や数値を追加する

変数を使う場合も、文字列と同じようにメソッドへ渡せます。数値はテンプレートリテラルへ入れると読みやすくなります。

const itemCount = 3;
$('#cart-status').text(`カートに${itemCount}件入っています`);

テキストを追加・変更できないとき

• classの前にドット、idの前に#を付けているか
• jQuery本体より後にscript.jsを読み込んでいるか
• 対象HTMLの読み込み後に処理しているか
• 追加したいのにtext()で全体を置き換えていないか
• inputの値を取得するときにtext()ではなくval()を使っているか

HTML要素そのものを追加する方法や、4つの追加位置の違いは次の記事で詳しく解説しています。

まとめ

• 末尾へ追加するならappend()
• 先頭へ追加するならprepend()
• 中身を文字へ置き換えるならtext()
• 現在の文字は引数なしのtext()で取得する
• 利用者の入力値はtext()で表示する

まずは短い文章で追加と置き換えを試し、元の内容を残したいかどうかでメソッドを選んでください。