jQuery 表示を書き換えるサンプル(textとhtml)

jQueryの画面の表示を書き換えるtextメソッドとhtmlメソッドのサンプルです。

サンプル

textメソッドとhtmlメソッドを使用したサンプルです。
ボタン1を押すと、textメソッドで予め設定された文言を表示します。文言には<b>タグが入っています。
ボタン2を押すと、htmlメソッドで予め設定された文言をhtml形式で表示します。文言には<b>タグが入っているため太字になります。

ボタンを押して下さい


コード

上記サンプルのコードです。
12行目は、textメソッドを使用しています。画面には「<b>ボタン1を押しました</b>」と<b>タグ付きで表示されます。
18行目は、htmlメソッドを使用しています。画面には「ボタン2を押しました」と太字で表示され<b>タグは表示されません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#id1").click(function() {
		// 1.textメソッドで書き換え
		$('#p1').text('<b>ボタン1を押しました</b>');
	});

	// ボタン2が押されたときの動作
	$("#id2").click(function() {
		// 2.htmlメソッドで書き換え
		$('#p1').html('<b>ボタン2を押しました</b>');
	});
});
</script>
</head>
<body >
3.Pタグ
<p id="p1">ボタンを押して下さい</p>
<input type="button" id="id1" value="ボタン1" /><br/>
<input type="button" id="id2" value="ボタン2" /><br/>
</body>
</html>

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)




△上に戻る