小粋空間  -  a cheap joke and a play on words site

jQueryのtext()とhtml()の違い

jQueryのtext()とhtml()の違いについて紹介します。jQueryビギナー向けのエントリーです。

１．text()について

text()は指定した要素のテキストノードを返却します。

簡単な例として、次のようなHTMLマークアップがあるとします。

<div class="foo">Demonstration Box</div>

このマークアップに対して

$('.foo').text();

を実行すると、次のような結果を返却します。

Demonstration

また、text()は指定した要素に含まれる子孫要素のテキストノードすべてを結合して返却します。

例えば次のようなHTMLマークアップがあるとします。

<div class="foo">
  <div class="bar">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

このマークアップに対して

$('.foo').text();

を実行すると、次のような結果を返却します。

Demonstration Box list item 1 list item 2

２．html()について

html()は指定した要素のHTMLを返却します（指定した要素は含みません）。

例えば次のようなHTMLマークアップがあるとします。

<div class="foo">
  <div class="bar">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

このマークアップに対して

$('.foo').html();

を実行すると次のような結果を返却します。

<div class="bar">Demonstration Box</div>
<ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
</ul>

指定した要素がテキストノードのみであれば、html()とtext()の実行結果は（多分）同じですが、指定した要素にHTMLが含まれる場合、HTMLを返却するというところが、text()との大きな違いです。

３．text(str)について

text(str)は、指定した要素に、パラメータで指定した内容をテキストノードとして設定します。

例えば次のように設定します。

$('.foo').text('bar');

実行して、class属性値「foo」の要素が存在すれば、次のようになります。

<div class="foo">bar</div>

また、パラメータにHTMLを記述すると「<」「>」が実体参照されます。つまりHTMLとして扱われません。

例えば次のように設定します。

$('.foo').text('<p>bar</p>');

実行すると次のようになります。

<div class="foo">&lt;p&gt;bar&lt;/p&gt;</div>

ちなみに、パラメータに関数を設定することも可能です。

$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});

４．html(htmlstr)について

html(htmlstr)は、指定した要素に、パラメータで指定した内容をHTMLとして設定します。

例えば、次のようにパラメータにHTMLを記述すると、すべてHTMLとして設定されます。

$('.foo').text('<p>bar</p>');

実行すると次のようになります。

<div class="foo"><p>bar</p></div>

こちらもtext(str)同様、パラメータに関数を設定することも可能です。

$('.foo').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

ということで、text()とhtml()は用途に応じて使い分けましょう。