jQueryでHTMLやテキストを変更・削除する方法

今回はHTML要素内の子HTML要素やテキストを操作する方法です。

動的にメッセージを変更したりページを構成するHTMLを変更したり出来ます。

タグ内のテキストを取得・変更する

HTMLは下のようなメッセージがあるとします。

<p id="idname">本日は晴れです。</p>

このメッセージを取得するjQueryはこのように書きます。

var v = $("#idname").text();

v には“本日は晴れです。”が入ります。

この文字列を “明日は雨です。” に変更しようと思います。

その場合は、text() の引数に変更後の文字列を渡すだけです。

$("#idname").text("明日は雨です。");

タグ内のHTMLを取得・変更する

text()と似ていますが、text()と同様に以下のHTMLがあったとします。

<p id="idname">本日は晴れです。</p>

これに対し html() を使って内容を取得します。

var v = $("#idname").html();

v にはテキスト同様 “本日は晴れです。” が入ります。

text()と同様引数に “明日は雨です。” と入れてみます。

$("#idname").html("明日は雨です。");

結果はtext()と同様 “明日は雨です。” に変わります。

 

では text() と何が違うのか？

text()とhtml()の違い

text()とhtml()の違いはHTML要素を扱えるかどうかです。

例えば下のようなHTMLのブロック要素があります。

<div id="idname2"></div>

ここにHTML要素を含むメッセージを表示したいと思います。

メッセージの文字列は “<p>明日は雨です。</p>” です。

 

text()で実行

$("#idname2").text("<p>明日は雨です。</p>");

この場合は画面に表示されるメッセージは <p>明日は雨です。</p> となります。

タグもエスケープされて画面上に表示されてしまうのです。

 

html()で実行

$("#idname2").html("<p>明日は雨です。</p>");

この場合は画面に表示されるメッセージは 明日は雨です。 となります。

タグをタグとして認識して画面上に表示することが出来ます。

まとめ

タグ内の情報を編集する方法は text() と html() がある。

出力する文字列にHTMLタグが含まれている場合は html() を使い、そうで無い場合やタグをエスケープして出力したい場合は text() を使う。