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

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

Posted at September 5,2012 1:55 AM
Tag:[jQuery]

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

1.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

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()との大きな違いです。

3.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);
});

4.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()は用途に応じて使い分けましょう。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)