jQuery textメソッドとhtmlメソッドの違い

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

目次

サンプル textメソッドとhtmlメソッドの違い
JavaScriptで使うtextContentとinnerHTML

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

  • textメソッドは、htmlのタグを文字としてそのまま出力します。
    bタグは<b>という文字で表示されます。
  • 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/3.4.1/jquery.min.js"></script>
<script>

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

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

</script>

10行目は、textメソッドです。画面には<b>という文字で表示されます。
15行目は、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

 

JavaScriptで使うtextContentとinnerHTML

JavaScriptで使うtextContentプロパティとinnerHTMLプロパティは上記と同じ関係です。

textContentプロパティは、htmlのタグを文字としてそのまま出力します。
bタグは<b>という文字で表示されます。

innerHTMLプロパティは、htmlのタグを解釈して出力します。
bタグはhtmlとして解釈されます。bタグは表示されません。

<p id="p1">ボタンを押して下さい</p>
<input type="button" value="textContent" onclick="clickBtn1()">
<input type="button" value="innerhtml" onclick="clickBtn2()">

<script>
function clickBtn1(){
	const p1 = document.getElementById("p1");

	p1.textContent = "<b>ボタンを押しました</b>";
}
function clickBtn2(){
	const p1 = document.getElementById("p1");

	p1.innerHTML = "<b>ボタンを押しました</b>";
}
</script>

9行目の<b>は文字として表示されます。
14行目の<b>はhtmlとして動き<b>は表示されません。

関連の記事

jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery onで複数のイベントリスナを登録

△上に戻る