回答:
その違いはほぼ一目瞭然だと思います。そして、テストするのは非常に簡単です。
jQuery.html()
文字列をHTMLとしてjQuery.text()
扱い、コンテンツをテキストとして扱います
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").html('<a href="example.html">Link</a><b>hello</b>');
$("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
それほど明白ではない可能性のある違いは、jQuery APIドキュメントで説明されています
.html()のドキュメントでは:
この
.html()
メソッドはXMLドキュメントでは使用できません。
そして.text()のドキュメントでは:
.html()
メソッドとは異なり、.text()
XMLドキュメントとHTMLドキュメントの両方で使用できます。
$(function() {
$("#div1").html('<a href="example.html">Link</a><b>hello</b>');
$("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
((必要に応じて更新してください。この回答はWikiです))
.text()
または.html()
?回答: .html()
より速いです!すべての質問については、「動作テストキット」をご覧ください。
したがって、結論として、「テキストのみ」がある場合は、html()
メソッドを使用します。
注:意味がありませんか?.html()
関数はのラッパーにすぎないことを覚えておいてください.innerHTML
。ただし、.text()
関数jQueryでは「エンティティフィルター」が追加され、このフィルターは当然時間を消費します。
OK、本当にパフォーマンスが必要な場合 ... プロパティによる直接のテキスト置換にアクセスするには、純粋なJavascriptを使用してくださいnodeValue
。ベンチマークの結論:
.html()
2倍高速です.text()
。.innerHTML
はの3倍高速です.html()
。.nodeValue
は.html()
、の最大50 .text()
倍、の最大100 倍、の最大20倍です.innerHTML
。PS:.textContent
プロパティはDOM-Level-3で導入され、DOM .nodeValue
-Level-2で高速です(!)。
この完全なベンチマークを参照してください:
// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++)
$("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++)
$("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());
// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++)
document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());
nodeValue
プロパティを設定すると、 ">"を "&lt;"に変換します。など
.text()
約7倍速いようです.html()
)。ソースコード:codepen.io/damhonglinh/pen/vGpQEO。私は1500要素でテストしました。.html()
〜220msかかり、〜30ms .text()
かかった。
最初の例は実際にHTMLをに埋め込みますdiv
が、2番目の例は、要素関連の文字を対応する文字エンティティに置き換えることでテキストをエスケープし、文字どおりに表示します(つまり、HTMLはレンダリングされずに表示されます)。
.text()
関数では、すべて<
がに置き換えられることを意味し<
ます。したがって.html()
、ブラウザではリンクといくつかの太字のテキスト.text()
が表示され、ブラウザではすべてがテキストとして表示され、リンクや太字のテキストは作成されません。
このtext()
メソッドは、渡されたHTMLをエンティティエスケープします。使用するtext()
ページを表示するユーザーに表示されるHTMLコードを挿入場合にします。
技術的には、2番目の例では以下が生成されます。
<a href="example.html">Link</a><b>hello</b>
これはブラウザで次のようにレンダリングされます。
<a href="example.html">Link</a><b>hello</b>
最初の例は、実際のリンクといくつかの太字のテキストとしてレンダリングされます。
実際にはどちらも多少似ていますが、まったく異なります。これは、使用方法や目的によって異なります。
.html()
html要素を持つコンテナを操作するためにします。.text()
通常は別個の開始タグと終了タグを持つ要素のテキストを変更するために使用します.text()
メソッドはフォーム入力またはスクリプトでは使用できません。
.val()
inputまたはtextarea要素の場合。.html()
スクリプト要素の値。からhtmlコンテンツを取得.text()
すると、htmlタグがhtmlエンティティに変換されます。
.text()
XML文書とHTML文書の両方で使用できます。.html()
htmlドキュメント専用です。jsfiddleでこの例を確認して、アクションの違いを確認してください
値を単純なテキストとして表示する場合は、.text(…)を使用します。
値をhtml形式のテキスト(またはHTMLコンテンツ)として表示する場合は、.html(…)を使用します。
テキスト(たとえば、入力コントロールからのテキスト)に、HTMLで特別な意味を持つ文字/タグが含まれていないことが不明な場合は、必ず.text(...)を使用してください。テキストが正しく表示されない可能性があるため、これは非常に重要ですが、不要なJSスクリプトスニペット(たとえば、別のユーザー入力からのもの)がアクティブになる可能性もあります。
基本的に、$( "#div")。htmlはelement.innerHTMLを使用してコンテンツを設定し、$( "#div")。textは(おそらく)element.textContentを使用します。
http://docs.jquery.com/Attributes/html:
Set the html contents of every matched element
http://docs.jquery.com/Attributes/text:
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML
entities).
$( '。div')。html(val)は選択されたすべての要素のHTML値を設定し、$( '。div')。text(val)は選択されたすべての要素のテキスト値を設定します。
それぞれNode#textContentとElement#innerHTMLに対応していると思います。(Gecko DOM参照)。
異なる点は.html()
、HTMLとして評価すること.text()
と、テキストとして評価することです。
HTML HTMLのブロックを考えてみましょう
<div id="mydiv">
<div class="mydiv">
This is a div container
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
a text after ul
</div>
</div>
JS
var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'
図はこのリンクからのものですhttp://api.jquery.com/text/
.text()
HTMLタグの間に実際のテキストが表示されます。たとえば、p
タグ間の段落テキスト。興味深いのは、$
セレクターを使用してターゲットにしている要素のすべてのテキストと、選択した要素の子要素のすべてのテキストが表示されることです。あなたは複数持っているので、もしp
body要素内のテキストにタグをし、あなたが$(body).text()
、あなたが取得するすべてのすべての段落からテキストを。(テキストのみ。p
タグ。)
.html()
テキストとタグが表示されます。したがって、$(body).html()
基本的にはページ全体のHTMLページが表示されます
.val()
value
などの属性を持つ要素に対して機能しますinput
。input
含まれるテキストまたはHTMLを持っていないため、.text()
と.html()
の両方になりますnull
ためinput
の要素。
違いはtext()
あなたにhtmlタグを挿入することだと思いますhtmlタグは機能しません
$('#output').html('You are registered'+'<br>' +' '
+ 'Mister'+' ' + name+' ' + sourname ); }
出力:
You are registered <br> Mister name sourname
交換text()
でhtml()
出力
You are registered
Mister name sourname
その後、タグは<br>
動作しますhtml()
text()
。最初のスニペットではを使用する必要があります。
text()
メソッドは高速ですか?いくら?