jQueryの「textメソッド」と「htmlメソッド」の設定時の違い
jQueryの「textメソッド」と「htmlメソッド」の設定時の違いがわかったので記録。
まず書式を確認。
書式の確認
$(‘セレクタ’).text(‘表示文字列’); //textメソッド
$(‘セレクタ’).html(‘表示文字列’); //htmlメソッド
このように、書式そのものはまったく同じ。
ただ、「表示文字列」の処理が異なる。
textメソッドは、”表示文字列”内にhtmlタグが含まれていてもhtmlとして扱わずに、純粋なテキストとして設定する。「<」は「<」に、「>」は「>」に置き換わるイメージ。
一方、htmlメソッドは、”表示文字列”内にhtmlタグが含まれている場合は、htmlとして扱う。
サンプル
【jQuery】
textメソッドのパラメータと、htmlメソッドのパラメータは全く同じ内容にした。
$(function() { $('#func-text').text('<a href="http://www.google.co.jp">Google</a>'); $('#func-html').html('<a href="http://www.google.co.jp">Google</a>'); });
【html】
<p id="func-text"><a href="http://www.google.co.jp">Google</a></p> <p id="func-html"><a href="http://www.google.co.jp">Google</a></p>
【結果】