WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > jQuery｢text()｣でテキストを取得・変更する

jQuery｢text()｣でテキストを取得・変更する

2020年4月7日

jQueryのメソッド「.text()」は、指定要素のテキストの取得・設定ができるメソッド。

今回は、jQueryで「テキストを取得・設定」できるメソッド「.text()」について、その使い方をサンプルを交えて解説しよう。

目次

.text()の機能とは？

.text()の機能

.text()は、指定した要素の「テキストを取得・変更」する事ができるメソッド。

例えば$("p").text("こんばんわ");とした場合、pタグのテキストをこんにちわに変更する事ができる。

jQuery反映前

<p>こんにちわ</p>

jQuery反映後

<p>こんばんわ</p>

.text()の構文

$("p").text("任意の文字列");のように記述し、パラメータに任意の文字列を入れる事で、テキストを指定した文字列に変更する事ができる。

指定要素のテキストを取得する場合はvar hoge = $("p").text();のようにパラメータを指定せずに「空」にして、任意の変数に格納する事でテキストを取得できる。

jQueryで.text()を使って、テキストを変更する例

HTML

<div>
 <p>テキスト変更前</p>
</div>

jQuery

$(function(){
 $("div p").text("テキスト変更後");
});

ブラウザ表示

テキスト変更前

↓↓↓

テキスト変更後

このような形で$("div p")のテキストを変更する事ができる。

jQueryでテキストを取得する例

次は、テキストを取得する例をみてみよう。

HTML

<div>
 <p>テキストを取得する</p>
</div>

jQuery

$(function(){
 var hoge = $("div p").text();
 console.log(hoge)
});

これは、変数 hogeに$("div p")の「テキスト」を取得した値を格納してconsole.logで出力する例だ。

consoleの表示

"テキストを取得する"

以上、jQueryでテキストを取得・変更する方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

jQueryの「メソッド一覧」と使い方

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。免責事項

関連記事

jQueryのメソッドチェーンの使い方

jQuery｢insertAfter｣でHTMLを「指定要素の直後」に移動する

jQuery｢prop｣でプロパティの値を取得/設定

jQuery｢wrap｣で要素を指定のタグで囲う

jQuery｢.parent() / .parents() / .closest()｣で親要素を取得する方法

jQuery｢unwrap｣で指定要素を囲むタグを削除する方法

jQuery｢after｣で要素の直後にHTMLを挿入する

初心者向け：jQueryの「変数の使い方」を基本から！

jQuery｢makeArray｣でオブジェクトを配列に変換する方法

jQuery｢.fadeTo()｣で指定要素の透明度を変更する方法

jQuery｢.next() / .nextAll()｣で直後の兄弟要素を取得する方法

jQuery｢before｣で要素の直前にHTMLを挿入する

ナビゲーション

この記事を書いた人

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

サイト内検索

[ー]

目次

新着記事

カテゴリー

タグリスト