• HOME > 
  • JavaScript > 
  • jQueryのtext()の使い方【取得・追加・変更・削除の...

jQueryのtext()の使い方【取得・追加・変更・削除の方法】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

jQueryのtext()メソッドとは?

text()メソッドを使えば、ユーザーのアクションに応じて表示するテキストを切り替えるといった処理を行うことができます。

text()メソッドとhtml()メソッドの違い

text()と似たメソッドにhtml()というものが存在します。

どちらのメソッドも機能や使い方はほとんど同じですが、HTMLタグを含ませることができるかという点が大きく異なります。

  • text()メソッドは要素のテキストの追加や変更などを操作できるが、HTMLタグを含むことができない。
  • html()メソッドは要素のHTMLタグを含んだテキストの追加や変更などを操作できる

単にテキストだけを書き換えたい場合などはtext()メソッドを使い、HTMLタグと一緒に取得や追加・変更したい場合はhtml()メソッドを使用します。

text()メソッドの使い方

text()メソッドを使うと、要素が持つテキストの情報を取得したり、要素に対してテキストを追加・変更・削除といった操作を行うことが可能です。

テキストを取得する

セレクターで指定した要素が持つテキストを取得することができます。

テキストを取得する時の書き方

なお対象の要素が子要素を含んでいる場合は、その子要素が持つテキストも取得されます。

下の例では、test2の子要素であるspanタグが持つテキストもまとめて取得されています。

HTML

<div id="test1">ダミーテキスト1</div>
<div id="test2">ダミーテキスト2<span>子要素2</span></div>

jQuery

$(function(){
    var test1 = $("#test1").text();
    var test2 = $("#test2").text();
    console.log("test1の結果:" + test1 + "/test2の結果" + test2);
});

コンソール

test1の結果:ダミーテキスト1 / test2の結果ダミーテキスト2子要素2

テキストを追加する

テキストを持たない要素へ新しくテキストを追加することもできます。

テキストを追加する時の書き方

変数と組み合わせて追加することも可能です。なお対象の要素が子要素を含んでいる場合にtext()メソッドでテキストを追加すると、その子要素は削除されるので注意してください。

冒頭に説明した通り、text()メソッドにはHTMLタグを含ませることができません。仮にHTMLタグを混ぜて記述すると文字列としてそのまま表示されます。

HTML

<div id="test3"></div>
<div id="test4"><span></span></div>

jQuery

$(function(){
    $("#test3").text("追加したテキストです。");
    $("#test4").text("追加したテキストです。");
});

プレビュー

追加したテキストです。 追加したテキストです。

テキストを変更する

すでに要素がテキストを持っている場合は、text()メソッドによって内容を変更することができます。

書き方は前述のテキストを追加する方法と同じで、既存のテキストが無ければ追加、テキストを持っていれば上書きして変更されます。

テキストを変更する時の書き方

こちらも変数と組み合わせることができます。なお親要素をセレクターにした場合、テキストの変更にともない子要素はHTMLタグごと削除されるので注意して下さい。

HTML

<div id="test5">元のテキストです。</div>
<div id="test6">元のテキストです。<span>子要素6</span></div>

jQuery

$(function(){
    $("#test5").text("変更したテキストです。");
    $("#test6").text("変更したテキストです。");
});

プレビュー

変更したテキストです。 変更したテキストです。

テキストを削除する

要素が持っているテキストを削除することも可能です。

テキストを削除する時の書き方

なお親要素をセレクターにしてテキストを削除すると、中に含まれている子要素のHTMLタグも一緒に削除されるので注意が必要です。

HTML

<div id="test7">ダミーテキスト7</div>
<div id="test8">ダミーテキスト8<span>子要素8</span></div>

jQuery

$(function(){
    $("#test7").text("");
    $("#test8").text("");
});

html()メソッドの使い方

htmlメソッドを使うとtextメソッドでは行うことができなかったHTMLタグの取得やHTMLタグを含んだテキストの操作を行うことが可能です。

HTMLを取得する

指定したセレクターが持つHTML要素を取得することができます。

HTMLを取得する時の書き方

要素が持つテキストをはじめ、子要素やそれらのクラスやidといった属性などHTMLの構造がそのまま取得されます。

HTML

<div id="test9">
    <div class="inner">ダミーテキスト1<span>子要素1</span>
</div>

jQuery

$(function(){
    var test9 = $("#test9").html();
    console.log(test9);
});

コンソール

<div class="inner">ダミーテキスト1<span>子要素1</span></div>

HTMLを追加する

指定した要素にHTMLを新たに追加することができます。

HTMLを追加する時の書き方

階層を持ったものや、クラスやid等の属性を記述したものでも追加することが可能です。

text()メソッドと違いHTMLタグも挿入できるので、追加した要素にスタイルを適用させることができます。

HTML

<div id="test10"></div>

CSS

.inner{
    font-weight:bold;
    color:#d40000;
}
.inner span{
    color:#0000d4;
}

jQuery

$(function(){
    $("#test10").html("<div class='inner'>追加したテキスト10です。<span>追加した子要素10です</span></div>");
});

プレビュー

追加したテキスト10です。追加した子要素10です。

HTMLを変更する

HTMLを変更する時の書き方

既述の方法はHTMLを追加したときと同じです。なお、指定した要素が持つ子要素も全て上書きされるので注意してください。

HTML

<div id="test11"></div>

jQuery

$(function(){
    $("#test11").html("変更した子要素Aです。変更した子要素Bです。変更した子要素Cです。");
});

プレビュー

変更した子要素Aです。変更した子要素Bです。変更した子要素Cです。

HTMLを削除する

HTMLを削除する場合の書き方は次の通りです。

HTMLを削除する時の書き方

指定したセレクターが持つテキストと子要素がすべて削除されます。

HTML

<div id="test12"><div class="inner">ダミーテキスト12<span>子要素12</span></div></div>

jQuery

$(function(){
    $("#test12").html("");
});

プレビュー

まとめ

text()とhtml()もjQueryで動きのあるサイトを作る上で欠かせないメソッドです。条件分岐と組み合わせて色々な場面で必要になりますので是非マスターしましょう。要素を追加する方法としては、他にもappend()メソッドがあります。appned()メソッドは純粋に要素を追加するためのメソッドなので、追加したい要素を記述するだけで任意の箇所に追加することが出来ます。

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]