JavaScript

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

ボタンを押すとテキストが追加されたり、変更される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>

まとめ

jQueryを用いてテキストを追加・変更をする方法を解説しました。動きのあるサイトを作る需要は増えているため、テキストの追加・変更が実装できるスキルは重要です。テキストの追加・変更をする方法として下記の二点があります。

  • テキストを追加・変更する
  • HTMLを追加変更がある。

用途に応じて、使い分けるようにすることをおすすめします。いろいろ試して書いてみながらどちらのほうがいいかを判断できるようになれば、よりユーザーに見やすいWebページになります。