Was ist der Unterschied zwischen jQuery: text () und html ()?

Antworten:

347

Ich denke, der Unterschied ist fast selbsterklärend. Und es ist super trivial zu testen.

jQuery.html()behandelt die Zeichenfolge als HTML, jQuery.text()behandelt den Inhalt als 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>

Ein Unterschied, der möglicherweise nicht so offensichtlich ist, wird in der Dokumentation zur jQuery-API beschrieben

In der Dokumentation zu .html () :

Die .html()Methode ist in XML-Dokumenten nicht verfügbar.

Und in der Dokumentation zu .text () :

Kann im Gegensatz zur .html()Methode .text()sowohl in XML- als auch in HTML-Dokumenten verwendet werden.

$(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>
Erweitern Sie das Snippet
Live-Demo auf http://jsfiddle.net/hossain/sUTVg/

Peter Bailey
quelle
Es sollte auch beachtet werden, dass die Länge zwischen den beiden ebenfalls unterschiedlich ist. jsfiddle.net/sUTVg/458
GreeKatrina
5
@aequalsb Ich erkenne, dass dies jetzt eine alte Frage ist, aber ich muss bemerken, dass die Standardeinstellung der Verwendung von ´.html () ´ gefährlich ist, da der Text als HTML behandelt wird. Wenn Sie diesen Text von einem Querystring-Parameter, Formular, Header, der URL oder einem anderen Ort erhalten, den jemand anderes als Sie bereitstellen oder bearbeiten kann, sind Sie für XSS weit offen.
Canis
105

((bitte bei Bedarf aktualisieren, diese Antwort ist ein Wiki))

Unterfrage: Wenn nur Text, was ist schneller .text()oder .html()?

Antwort: .html() ist schneller! Sehen Sie hier ein „Verhalten Test-Kit“ für die ganze Frage .

Wenn Sie also "nur einen Text" haben, verwenden Sie abschließend die html()Methode.

Hinweis: Macht das keinen Sinn? Denken Sie daran, dass die .html()Funktion nur ein Wrapper ist .innerHTML, aber in der .text()Funktion fügt jQuery einen "Entitätsfilter" hinzu , und dieser Filter verbraucht natürlich Zeit.

Ok, wenn Sie wirklich Leistung wollen ... Verwenden Sie reines Javascript, um auf den direkten Textersatz durch die nodeValueEigenschaft zuzugreifen . Benchmark-Schlussfolgerungen:

  • jQuery's .html()ist ~ 2x schneller als .text().
  • reines JS ' .innerHTMList ~ 3x schneller als .html().
  • reines JS ' .nodeValueist ~ 50x schneller als .html(), ~ 100x als .text()und ~ 20x als .innerHTML.

PS: .textContentEigenschaft wurde mit DOM-Level-3 eingeführt, .nodeValueist DOM-Level-2 und ist schneller (!).

Sehen Sie diesen vollständigen Benchmark :

// 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());
Peter Krauss
quelle
7
Wenn Sie sich jedoch mit nicht vertrauenswürdigen Eingaben befassen, sollten Sie nach Möglichkeit text () verwenden.
Scott Simontis
@ScottSimontis, wenn Sie nodeValueEigenschaft festlegen , verwandelt es ">" in "& lt;" usw.
Peter Krauss
Wenn ich mit Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ) "Benchmarking" durchführe , ist das Ergebnis umgekehrt ( .text()scheint ~ 7x schneller als .html()). Quellcode: codepen.io/damhonglinh/pen/vGpQEO . Ich habe mit 1500 Elementen getestet; .html()dauerte ~ 220ms und .text()dauerte ~ 30ms.
Linh Dam
Hallo @LinhDam. Hum ... unter Verwendung des vollständigen Benchmarks sagt mein Firefox "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... und mein Chrome sagt "JQ" TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... also haben beide (Firefox und Chrome) die gleichen Zeitverhältnisse .
Peter Krauss
Um ein echter Benchmark zwischen text () und html () zu sein, sollte die Auswahl in allen Fällen durchgeführt werden oder getElementById oder $ ("# work"), oder Sie werden auch $ ("# work") gegen getElementById
Octavioamu
66

Im ersten Beispiel wird HTML tatsächlich in das eingebettet, divwährend im zweiten Beispiel der Text durch Ersetzen elementbezogener Zeichen durch die entsprechenden Zeichenentitäten ausgeblendet wird, sodass es buchstäblich angezeigt wird (dh das HTML wird nicht gerendert angezeigt ).

Andrew Hare
quelle
1
Entschuldigung, ich verstehe nicht ganz. Könnten Sie das näher erläutern? Danke
Brettk
Was meinst du mit dem 2. Beispiel "codieren"? Es ist bereits codiert, nein?
Brettk
@Brettk - Ich sagte "codieren", aber das war eher ein Fingerabdruck. Ich habe meine Antwort geändert, um besser zu reflektieren, was ich meine.
Andrew Hare
6
Er meint, dass in der .text()Funktion alle <durch ersetzt werden &lt;. Wenn .html()der Browser also einen Link und etwas Fettdruck .text()sieht, sieht der Browser alles als Text und erstellt keinen Link oder Fettdruck.
Mottie
59

Die text()Methodenentität entgeht jeglichem HTML-Code, der an sie übergeben wird. Verwenden text()Sie diese Option, wenn Sie HTML-Code einfügen möchten, der für Personen sichtbar ist, die die Seite anzeigen.

Technisch ergibt Ihr zweites Beispiel:

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

welches im Browser gerendert würde als:

<a href="example.html">Link</a><b>hello</b>

Ihr erstes Beispiel wird als tatsächlicher Link und fett gedruckter Text gerendert.

davidcl
quelle
4
Dies sollte in der ausgewählten Antwort enthalten sein, um zu erklären, was wirklich vor sich geht.
d512
27

Eigentlich sehen beide etwas ähnlich aus, sind aber sehr unterschiedlich. Es hängt von Ihrer Verwendung oder Absicht ab, was Sie erreichen möchten.

Verwendungszweck:

  • Verwenden Sie .html()diese Option, um Container mit HTML-Elementen zu bearbeiten.
  • Verwenden Sie .text()diese Option, um den Text von Elementen zu ändern, die normalerweise separate offene und schließende Tags haben

Wo nicht zu verwenden:

  • .text() Die Methode kann nicht für Formulareingaben oder Skripte verwendet werden.

    • .val() für Eingabe- oder Textbereichselemente.
    • .html() für den Wert eines Skriptelements.

  • Durch das Aufnehmen von HTML-Inhalten .text()werden die HTML-Tags in HTML-Entitäten konvertiert.

Unterschied:

  • .text() kann sowohl in XML- als auch in HTML-Dokumenten verwendet werden.
  • .html() ist nur für HTML-Dokumente.

Überprüfen Sie dieses Beispiel auf jsfiddle, um die Unterschiede in der Aktion zu sehen

Beispiel

Owais Qureshi
quelle
1
Diese Antwort war am einfachsten zu verstehen und am besten formatiert +1
Katie
Was ist das diff bw :: html (Daten); & val (Daten); @Owais Qureshi
Gem
9

Seltsam, dass niemand den Vorteil der Verhinderung von Cross Site-Skripten von .text()über erwähnt hat .html()(obwohl andere gerade erwähnt haben, dass .text()die Daten entgehen).

Es wird immer empfohlen, diese zu verwenden, .text()wenn Sie Daten in DOM aktualisieren möchten, bei denen es sich nur um Daten / Text handelt, die der Benutzer sehen kann.

.html() sollte meistens verwendet werden, um den HTML-Inhalt innerhalb eines div zu erhalten.

Deb
quelle
5

Verwenden Sie .text (…), wenn Sie den Wert als einfachen Text anzeigen möchten.

Verwenden Sie .html (…), wenn Sie den Wert als HTML-formatierten Text (oder HTML-Inhalt) anzeigen möchten.

Sie sollten auf jeden Fall .text (...) verwenden, wenn Sie nicht sicher sind, ob Ihr Text (z. B. von einem Eingabesteuerelement) keine Zeichen / Tags enthält, die in HTML eine besondere Bedeutung haben. Dies ist sehr wichtig, da dies dazu führen kann, dass der Text nicht richtig angezeigt wird, aber auch dazu, dass ein unerwünschtes JS-Skript-Snippet (z. B. von einer anderen Benutzereingabe) aktiviert wird .

Adorjan Princz
quelle
2

Grundsätzlich verwendet $ ("# div"). Html element.innerHTML, um Inhalte festzulegen, und $ ("# div"). Text verwendet (wahrscheinlich) 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).
Seth
quelle
2

Gut in einfachen Worten.

html () - um inneres HTML (HTML-Tags und Text) abzurufen.

text () - um nur Text zu erhalten, wenn er im Inneren vorhanden ist (nur Text)

Mustkeem K.
quelle
1

Der Unterschied wird .html()als HTML ausgewertet, .text()als Text bewertet .
Betrachten Sie einen Block 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'

Die Abbildung stammt von diesem Link http://api.jquery.com/text/

Pascal Tovohery
quelle
1

.text()gibt Ihnen den tatsächlichen Text zwischen HTML-Tags. Zum Beispiel der Absatztext zwischen pTags. Interessant ist, dass Sie mit Ihrem $Selektor den gesamten Text des Elements erhalten, auf das Sie abzielen, sowie den gesamten Text in den untergeordneten Elementen des ausgewählten Elements. Wenn Sie also mehrere pTags mit Text im body-Element haben und a ausführen $(body).text(), erhalten Sie den gesamten Text aus allen Absätzen. (Nur Text, nicht die pTags selbst.)

.html()gibt Ihnen den Text und die Tags. So erhalten Sie $(body).html()im Grunde Ihre gesamte Seite HTML-Seite

.val()funktioniert für Elemente, die ein valueAttribut haben, wie z input. Ein inputmuss nicht enthalten Text oder HTML und somit .text()und .html()wird beides sein nullfür inputElemente.

Fabian Madurai
quelle
0

Ich denke, dass der Unterschied darin besteht, ein HTML-Tag in text()Ihr HTML-Tag einzufügen, das nicht funktioniert

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

Ausgabe : 

You are registered <br> Mister name sourname

Ersetzen text()durchhtml()

Ausgabe 

You are registered
Mister name sourname

dann <br>funktioniert das Tag inhtml()

David
quelle
1
Bitte korrigieren Sie Ihre Antwort, das erste Snippet sollte verwendet werden text().
MKaama
0

Textfunktion setzt oder ruft den Wert als einfachen Text ab, andernfalls setzt oder ruft die HTML-Funktion den Wert als HTML-Tags ab, um dies zu ändern oder zu modifizieren. Wenn Sie nur den Inhalt ändern möchten, verwenden Sie text (). Wenn Sie jedoch das Markup ändern müssen, müssen Sie hmtl () verwenden.

Es ist eine Scheinantwort für mich nach sechs Jahren.

Minhaz
quelle