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

2711 ワード
HTML jQuery text JavaScript HTML テキストリンク

text()について

text()は指定した要素のテキストノードを返す。
指定した要素に含まれる子孫要素のテキストノードすべてを結合して返す。
※ テキストノードは、「HTML 文書」や「XML 文書」の、タグ以外の文字データ
　

今回使用するhtmlの例

html
<div class="hoge">
  <div class="hoge1">hoge1です</div>
  <ul>
    <li>hogeの中の1個目</li>
    <li>hogeの中の2個目</li>
  </ul>
</div

このhtmlに対して
$('.hoge').text();
を実行すると、次のような結果になる。

結果
hoge1です hoge1の中の1個目 hoge1の中の2個目

html()

html()は指定した要素のHTMLを返す（指定した要素は含まない）

今回使用するhtmlの例

html
<div class="hoge">
  <div class="hoge1">hoge1です</div>
  <ul>
    <li>hogeの中の1個目</li>
    <li>hogeの中の2個目</li>
  </ul>
</div

このhtmlに対して
$('.hoge').html();
を実行すると、次のような結果になる。

結果
<div class="hoge1">hoge1です</div>
  <ul>
    <li>hogeの中の1個目</li>
    <li>hogeの中の2個目</li>
  </ul>

その他

html()やtext()で書き換えた文が存在するかどうかの確認。
自分がやった方法なので、他に方法にも方法はある。

console.log($('.hoge').text());
console.log($('.hoge').html());