• JavaScript

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

投稿日:2020年12月28日（最終更新日:2022年06月22日）

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

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

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

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

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

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

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

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

text()メソッドの使い方

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

テキストを取得する

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

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

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

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

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

テキストを追加する

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

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

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

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

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

テキストを変更する

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

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

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

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

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

テキストを削除する

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

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

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

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

html()メソッドの使い方

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

HTMLを取得する

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

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

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

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

HTMLを追加する

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

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

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

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

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

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

HTMLを変更する

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

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

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

HTMLを削除する

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

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

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

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

まとめ

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