HTMLエンティティを使用したjquery text（）の詳細を理解する

Question

jquery text()関数とHTMLエンティティの組み合わせを特定することができません。 text()関数は特殊なHTMLエンティティを通常の文字に変換しているようです。

$(document).ready(function() { 
 
    var value = $("#test").text(); 
 
    console.log(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    &lt;h1&gt; test &lt;/h1&gt; 
 
</div>

出力はHTMLエンティティはエスケープされた文字列のようですので、：特に、私はこのコードスニペットは、どのように動作するかわかりませんよ。これは、text()関数がHTMLエンティティをエスケープしないことを意味しますか？

EDIT/FOLLOW UP： text()は実際のテキストコンテンツのみを返すようだから、このコードスニペットを理解するのは問題ありません。エスケープされていません。 text()がエスケープされた文字列を返した場合、html関数は何故フォーマットされた文字列を返しますか？

$(document).ready(function() { 
 
    var value = $("#test").text(); 
 
    console.log(value); 
 
    $("#test").html(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    &lt;h1&gt; test &lt;/h1&gt; 
 
</div>

Answer 1

text()は特別何もしていません。元のHTMLを解析するときに、ブラウザ自体がエンティティをレンダリングされた文字に変換します。したがって、<h1>をHTMLに書き込むと、ブラウザはこれをリテラル文字列<h1>に変換します。 .text()は単にこのテキストを返します。

.html()を使用すると、文字列がHTMLとして解析されるため、<h1>がHTMLタグとしてレンダリングされ、書式設定された結果が得られます。

Answer 2

あなたがソースを見れば、あなたはそれが要素からのTextContentを引き出していることがわかります。 https://j11y.io/jquery/#v=git&fn=jQuery.fn.text

のTextContentが何であるかの一部のマニュアル： https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

$(document).ready(function() { 
 
    var value = $("#test").text(); 
 
    console.log(value); 
 
    //https://j11y.io/jquery/#v=git&fn=jQuery.fn.text 
 
    console.log($("#test").get(0).textContent); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    &lt;h1&gt; test &lt;/h1&gt; 
 
</div>