Wann man jQuery .html oder .text auf einem Element verwenden sollte

Question

In dieser Frage, die ich gestellt habe (und beantwortet wurde), habe ich herausgefunden, wie man den Wert eines Textfelds korrekt dem Wert eines Labels zuweisen kann. Die Antwort war entweder

$('#txtBranchName').val($('#lblBranchName').html());

oder

$('#txtBranchName').val($('#lblBranchName').text());

Ist eine Methode der anderen vorzuziehen? Gibt es Leistungsunterschiede oder würde eine Methode in bestimmten Situationen funktionieren, während die andere nicht?

Answer 1

Daten einstellen

.text("**Test**") wird alle HTML-Tags escapen (rendering **Test**)

.html("**Test**") wird sie als tatsächliche HTML-Elemente rendern (rendering Test).

Daten lesen

.text() wird nur Textknoten zurückgeben (Tags entfernen)

.html() wird den tatsächlichen HTML-String einschließlich Tags zurückgeben.

---

Hier ist ein JSFiddle, der den Unterschied auf beide Arten zeigt.

Answer 2

Wenn es keine HTML-Unterelemente des Labels gibt, spielt es keine Rolle, ob es so oder so ist. Wenn jedoch welche vorhanden sind (wie beispielsweise ein rotes "Erforderlich"-Zeichen), ist es vorzuziehen, .text() zu verwenden, damit Sie nur dieses Zeichen erhalten, statt es vom HTML generieren zu lassen.

Answer 3

Verweis: Was ist der Unterschied zwischen jQuery: text() und html() ? und Unterschiede zwischen .text() und .html() mit maskierten < und > Zeichen

Eigentlich sehen beide Methoden etwas ähnlich aus, sind aber ziemlich unterschiedlich. Es kommt auf Ihre Verwendung oder Absicht an, was Sie erreichen möchten.

Wo zu verwenden:

• Verwenden Sie .html(), um auf Container mit HTML-Elementen zu arbeiten.
• Verwenden Sie .text(), um den Text von Elementen zu ändern, die normalerweise separate öffnende und schließende Tags haben.

jQuery.html() behandelt den String als HTML, jQuery.text() behandelt den Inhalt als Text.

Im Gegensatz zur .html() Methode kann .text() sowohl in XML- als auch in HTML-Dokumenten verwendet werden. Das Ergebnis der .text() Methode ist ein String, der den kombinierten Text aller übereinstimmenden Elemente enthält. (Aufgrund von Unterschieden in den HTML-Analysatoren in verschiedenen Browsern kann der zurückgegebene Text in Zeilenumbrüchen und anderem Leerzeichen variieren.)