【jQuery】text()メソッドでHTML要素内のテキストを操作する

今回はHTML要素内のテキストを操作することができるjQueryのtext()メソッドについて解説します！

text()メソッドとは？

text()メソッドは、HTML要素内にあるテキストを操作することができる、jQueryにあらかじめ用意されている機能です。

text()メソッドだけで、HTML要素内のテキストを取得・追加・変更・削除することができます。

たとえば、フォームの送信ボタンを押したら下に「送信ありがとうございます」というテキストを表示させたいといった時などに役立ちます。

覚えておけばコーディングの幅が広がるでしょう。

jQueryのtext()メソッドでテキストを取得する

まずは、基本としてHTML要素内のテキストを取得してみましょう。

以下コードをご覧ください。

See the Pen 【jQuery】テキストを取得 by spiqa design (@spiqa_design) on CodePen.

$(".test1").text();で、クラス名「test1」を指定したpタグ内のテキストを取得し、変数test1に格納します。

問題なく取得できているか、コンソールに出力してみます。

コンソールを見てみると無事取得し、出力できました。

jQueryのtext()メソッドでテキストを追加する

.text()メソッドに引数を渡すことで、HTML要素内にテキストを追加することができます。

書き方としては、$(".class").text('テキスト');となります。

See the Pen 【jQuery】テキストを追加する by spiqa design (@spiqa_design) on CodePen.

pタグ内は空ですが、「スピカ」というテキストが表示されています。

text()メソッドによってテキストが追加されているのがわかりますね。

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

すでにテキストが入っているHTML要素に対して、text()メソッドで引数を指定すると、テキストが書き換えられます。

See the Pen 【jQuery】テキストを変更する by spiqa design (@spiqa_design) on CodePen.

HTML要素内に「スピカ」というテキストが入っていますが、text()メソッドの引数に「デザイン」が指定されているため、「デザイン」に書き換えられているのがわかりますね。

jQueryのtext()メソッドでテキストを削除する

HTML要素内を削除する場合は、text()メソッドの引数を空(ダブルクォーテーションのみ)で指定します。

See the Pen 【jQuery】テキストを削除する by spiqa design (@spiqa_design) on CodePen.

pタグ内の「スピカ」が削除され、pタグ内が空になっているのがわかります。

複数のHTML要素内からテキストを取得する

text()メソッドは、複数のHTML要素内からテキストを取得することも可能です。

See the Pen 複数のHTML要素内からテキストを取得する by spiqa design (@spiqa_design) on CodePen.

クラス名「test1」を指定した複数のpタグからテキストを取得し、クラス名「test2」を指定したpタグ内に追加しています。

全てのテキストを取得し、「株式会社スピカデザイン」と表示されていますね。

注意点としては、改行や空白などは一切入らず、一文となるという点です。

jQueryのtext()でHTML内のテキストを操作する方法まとめ

• text()メソッドはHTML要素内のテキストを操作できるjQueryの機能
• テキストを追加・変更する場合はtext()メソッドに引数を指定する
• テキストを削除する場合はtext()メソッドに引数を空(ダブルクォーテーションのみ)で指定する
• 複数のHTML要素内からテキストを取得することもできる

text()メソッドだけでテキストの取得・追加・変更・削除が可能なので、覚えておくとあらゆる場面で役に立ちます。

ぜひご参考・ご活用ください！

関連記事はこちら

【jQuery】text()メソッドでHTML要素内のテキストを操作する