JavaScript
DOM操作
javascript

jQueryを用いてテキストを追加・変更する方法を解説

2021/02/24

( 更新日：2022/05/25 )

ボタンを押すとテキストが追加されたり、変更されるWebページの機能を見たことがあると思います。HTML、CSSのみで実装されるWebサイトではテキストの追加・変更する機能を実装することができません。

jQueryを使えば簡単にテキストの追加・変更をする機能を実装することができます。JavaScriptを利用しても実装可能ですが、jQueryの方がコードがシンプルで使いやすいので

本記事ではjQueryを用いてテキストを追加・変更する方法を解説します。サンプルコードも載せているので参考ください。

テキストを追加する方法【append()、prepend()】

テキストの中身を追加する

テキストを追加するにはappendというメソッドを使います。「append」は英語で「追加する」という意味を持ちます。基本構文は以下の通りです。

$('セレクタ').append('追加したいテキスト');

セレクタで指定されたHTMLタグの中にappendの引数の文字が入ります。追加したテキストはタグ内の文字の一番後ろに追加されます。

HTMLタグのまま追加する

新しいタグを追加したい場合はappendの引数をHTMLタグで囲うことで追加できます。基本構文は以下の通りです。

$('セレクタ').append('<p>追加したいテキスト</p>');

pタグはどんなタグでも構いません。appendで挿入されるHTMLタグはセレクタが親要素となり、セレクタの子要素の一番後ろに挿入されます。

例えば、ボタンを押せばリストを追加したい場合はulタグに新しいliタグを追加するメソッドを書きます。(サンプルコード参照）

前に追加する

appendメソッドでは文字や子要素の一番最後に追加されます。一番前に追加するにはappendではなく、prependメソッドを使います。もし、文字を一番前に追加したい場合はprepend(‘追加したい文字、HTML’)とするようにしましょう。

サンプルコード

サンプルコードをそのままコピーすれば、ボタンを押したときにテキストを追加する動きを体験できます。ぜひ、動かしてみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストの追加</title>
  </head>

  <body>
    <div class="change">
      <!--テキストの追加-->
      <button id="append-text">append text</button>
      <p></p>
      <!--htmlの追加-->
      <button id="append-html">append html</button>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      'use strict';
      $('#append-text').on('click', function () {
        $('p').append('HELLO WORLD');
      });

      $('#prepend-text').on('click', function () {
        $('p').prepend('HELLO WORLD');
      });

      $('#append-html').on('click', function () {
        $('ul').append('<li>jQuery</li>');
      });
    </script>
  </body>
</html>

テキストを変更する方法【html()、text()】

text()

テキストを変更する場合はtextメソッドを使います。基本構文は以下の通りです。

$('セレクタ').text('変更したいテキスト');

本コードではセレクタ内のテキストが変更されます。<>～</>までの「～」にあたる部分が変更されます。textの場合、HTMLタグ自体は保たれたまま、テキストのみが変更されます。

html()

HTMLから変更したい場合にはhtmlメソッドを使います。基本構文は以下の通りです。

$('セレクタ').html('<p>変更するテキスト</p>');

htmlメソッドではセレクタのHTMLタグをhtmlメソッドの引数に置き換えます。テキストの変更には使いにくいですが、HTMLの取得に使われることが多いです。

サンプルコード

テキストを変更するコードのサンプルです。bodyタグの部分のみ記載しています。その他の部分はテキスト追加のコードと同じなので、そちらからコピーしてください。

<div class="change">
  <!--テキストの変更-->
  <button id="append-text">change text</button>
  <p id="text-change">GOOD-BYE</p>
  <!--htmlの変更-->

  <button id="append-html">change html</button>
  <p>ここは：<strong>強調されています。</strong></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  'use strict';
  $('#append-text').on('click', function () {
    $('#text-change').text('HELLO WORLD');
  });

  $('#append-html').on('click', function () {
    $('strong').html('<small>小さくなりました。<small>');
  });
</script>