HTML5 JavaScript

2021.10.22

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

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

関連記事はこちら

この記事をシェアする

関連記事

  • 2023.12.26

    一本の線がユーザーに寄り添う話

    HTML5

    コーディング

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2021.11.30

    【HTML5】base要素の使い方と注意点を解説

    HTML5

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×