ごちゃまぜブログ

jQueryの「textメソッド」と「htmlメソッド」の設定時の違いがわかったので記録。

まず書式を確認。

書式の確認

$(‘セレクタ’).text(‘表示文字列’); //textメソッド
$(‘セレクタ’).html(‘表示文字列’); //htmlメソッド

このように、書式そのものはまったく同じ。
ただ、「表示文字列」の処理が異なる。

textメソッドは、”表示文字列”内にhtmlタグが含まれていてもhtmlとして扱わずに、純粋なテキストとして設定する。「<」は「&lt;」に、「>」は「&gt;」に置き換わるイメージ。

一方、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">&lt;a href="http://www.google.co.jp"&gt;Google&lt;/a&gt;</p>
  <p id="func-html"><a href="http://www.google.co.jp">Google</a></p>

【結果】