HTML5 JavaScript

2021.03.30

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

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

text()メソッドとは?

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

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

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

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

テキストを取得する

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

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

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

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

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

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

テキストを追加する

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

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

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

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

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

テキストを変更する

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

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

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

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

関連記事はこちら

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

おすすめ記事

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!