【jQuery】取得も追記にも便利なtext()とhtml()、2つの違いを徹底解剖

text(),html()

両メソッドとも指定したHTML要素の文字列を取得・追加をするメソッドですが、微妙に挙動が違うのでしっかり使い分けましょう。

文字列取得

text()メソッドを使った文字列の取得は指定したすべての要素を取得するのに対してHTML()メソッドは指定した要素で最初に出現する要素のみを取得します。

<p>おはよう</p>
<p>こんばんは</p>
<script>
    let text = $('p').text();
    let html = $('p').html();

    console.log(text);
    //表示結果
    おはようこんばんわ
    
    console.log(html);
    //表示結果
    おはよう
</script>

文字列追加

text()メソッドはタグを含めた文字列を追加しようとした場合、タグも文字列として扱うため画面に表示されます。html()メソッドを使うとタグはHTMLタグとして認識され画面上には表示されません。

<p>今日も元気です。</p>
<script>
    $('p').text('<h1>今日の予定は?</h1>');
    $('p').html('<h1>今日の予定は?</h1>');
</script>
表示結果
text()の場合 <h1>今日の予定は?</h1>
html()の場合 今日の予定は
タイトルとURLをコピーしました