【jQuery】HTMLの取得と書き換えについてhtml( )とtext( )の違い

jQuery
スポンサーリンク

仕事で古いコードを見てたらエスケープしないといけない所でjQueryのhtml( )を使ってたりしてたので、text( )との違いなどをまとめておきたいと思います。基本的な使い方からおさらいします。

html( )について

html( ) は指定した要素内のHTMLを取得、または要素内に指定したHTMLを挿入（書き換え）します。

取得の場合 ： $('セレクタ').html( )

取得されるHTMLは要素内の全ての子孫要素までが対象です。

<div class="hoge">
    <div class="title">
        <h1>HTMLの取得</h1>
    </div>
</div>
<script>
   alert($('.hoge').html());
</script>

このHTMLに対して class=hoge 要素内の取得を実行した結果が以下の通りです。
ただし指定した要素は含みません。

f:id:tasukujp:20141015004342p:plain


また、同じ要素が複数存在した場合はどうなるでしょうか。

<div class="hoge">
    <div class="title">
        <h1>HTMLの取得1</h1>
    </div>
</div>
<div class="hoge">
    <div class="title">
        <h2>HTMLの取得2</h2>
    </div>
</div>
<script>
   alert($('.hoge').html());
</script>

この場合は最初にマッチした要素のみ取得されます。

f:id:tasukujp:20141015004342p:plain

挿入の場合 ： $('セレクタ').html(val)

指定値（val）で要素内のHTMLを書き換えます。ここでは挿入より書き換えと言ったほうが分かり易いですね。

<div class="hoge">
    <div class="title">
        <h1>HTMLの取得</h1>
    </div>
</div>
<script>
   $('.hoge').html('<b>HTMLの書き換え</b>');
</script>

このHTMLに対して class=hoge 要素内の書き換えを実行した結果が以下の通りです。
要素内のHTMLが全て書き換えられている事がポイント。

<div class="hoge">
    <b>HTMLの書き換え</b>
</div>

また、val に関数を指定してその戻り値で書き換える事も可能です。

$('.hoge').html(function() {
    return 〜
});


取得と同じくこちらも同じ要素が複数存在した場合はどうなるでしょうか。

<div class="hoge">
    <div class="title">
        <h1>HTMLの取得1</h1>
    </div>
</div>
<div class="hoge">
    <div class="title">
        <h2>HTMLの取得2</h2>
    </div>
</div>
<script>
   $('.hoge').html('<b>HTMLの書き換え</b>');
</script>

この場合は全ての要素に対して書き換えが実行されます。取得との違いに気を付けましょう。

<div class="hoge">
    <b>HTMLの書き換え</b>
</div>
<div class="hoge">
    <b>HTMLの書き換え</b>
</div>

text( )について

text( ) は指定した要素内のテキストを結合した結果を取得、または要素内に指定したテキストを挿入（書き換え）します。

取得の場合 ： $('セレクタ').text( )

取得されるテキストは要素内の全ての子孫要素まで対象になります。

<div class="hoge">
    <ul>
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
    </ul>
</div>
<script>
   alert($('.hoge').text());
</script>

このHTMLに対して class=hoge 要素内の取得を実行した結果が以下の通り。 HTMLタグを除いて要素内のテキストのみが結合されてるのがわかります。複数の要素があるとタブとかがそのまま結合されてしまうので気を付けましょう。

f:id:tasukujp:20141015010232p:plain

挿入の場合 ： $('セレクタ').text(val)

指定値（val）で要素内のHTMLを書き換えます。html(val) と基本的に同じですが、text(val) の場合はエスケープして追加してくれます。

<div class="hoge">
    <ul>
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
    </ul>
</div>
<script>
   $('.hoge').text('<b>HTMLの書き換え</b>');
</script>

このHTMLに対して class=hoge 要素内の書き換えを実行した結果が以下の通り。エスケープされて要素内のHTMLが全て書き換えられます。

<div id="hoge">
    &lt;b&gt;HTMLの書き換え&lt;/b&gt;
</div>

ついでにエスケープされる事でどのように表示が変わるのかを比べてみました。html( ) の場合はタグがそのままHTMLとして認識されているのがわかります。

text( )を使用した場合 ：
html( )を使用した場合 ：


また、html( ) と同じく val に関数を指定してその戻り値で書き換える事も可能です。

$('.hoge').text(function() {
    return 〜
});
text( )の取得と挿入の違い

html( ) は同じ要素が複数存在した場合、取得は「最初の要素」のみで、挿入は「全ての要素」が対象になるという違いがありましたが、text( ) の場合はどちらの場合も「全ての要素」が対象になります。

以上、html( ) と text( ) の違いを理解出来てないとエスケープ漏れがでてきたりしますので気を付けましょう。また、今回は要素内の全てが対象になってしまいますが、全て書き換えではなくて要素を追加したい場合などはそれぞれ適したAPIがありますのでまた別途まとめたいと思います。