jQuery textメソッドとhtmlメソッドの違いのサンプル

jQueryのtextメソッドとhtmlメソッドの違いのサンプルです。

目次

textメソッドとhtmlメソッドの違いのサンプル

  • textメソッドは、htmlのタグを文字としてそのまま出力します。
    textボタンを押すと、bタグは<b>という文字で表示されます。
  • htmlメソッドは、htmlのタグを解釈して出力します。
    htmlボタンを押すと、bタグはhtmlで解釈されます。bタグは表示されません。

ボタンを押して下さい

 

コード

上記サンプルのコードです。

<p id="p1">ボタンを押して下さい</p>
<input type="button" id="button1" value="textボタン" />
<input type="button" id="button2" value="htmlボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// 1.textメソッドで書き換え
		$("#p1").text("<b>ボタン1を押しました</b>");
	});

	$("#button2").click(function() {
		// 2.htmlメソッドで書き換え
		$("#p1").html("<b>ボタン2を押しました</b>");
	});
});
</script>

11行目は、textメソッドです。画面には<b>という文字で表示されます。
16行目は、htmlメソッドです。画面には太字で表示されbタグは表示されません。

 

textメソッド

  • jQueryのtextメソッドです。
  • テキストを表示します。
  • 以下はjQueryサイトのtextメソッドのページです。
    http://api.jquery.com/text/#text2

htmlメソッド

  • jQueryのhtmlメソッドです。
  • HTMLの解釈をして表示します。
  • 以下はjQueryサイトのhtmlメソッドのページです。
    http://api.jquery.com/html/#html2

関連の記事

jQuery 属性値を取得/設定するサンプル(attr)
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

△上に戻る