Was ist der Unterschied zwischen innerHTML und html() in jquery?

Unterschiede: 1. html() kann schreibgeschützte Tags wie tbody und tr setzen, aber innerHTML funktioniert nicht in niedrigeren Versionen von IE und kann nicht zugewiesen werden, meldet das Skript einen Fehler . Das von html() festgelegte Skript wird nicht ausgeführt.

Empfohlenes Tutorial: jquery-Video-Tutorial

Der Unterschied zwischen InnerHtml() und html()

1. html() kann schreibgeschützte Tags wie tbody und tr festlegen. während innerHTML Es funktioniert nicht in niedrigeren Versionen von IE

In einem HTML-Dokument können wir die .html()-Methode verwenden, um den Inhalt eines beliebigen Elements abzurufen. Wenn der Selektor mit mehr als einem Element übereinstimmt, wird nur der HTML-Inhalt des ersten übereinstimmenden Elements abgerufen.

innerHTML ist der gesamte Inhalt von der Startposition bis zur Endposition des Objekts, einschließlich des HTML-Tags

Ich dachte ursprünglich, dass innerHTML und der HTML-Code in JQuery tatsächlich genau gleich seien und JQuery überflüssig sei, bis ich auf a stieß Problem

Schauen Sie sich ein Beispiel an:

var tbody=document.createElement('tbody');
tbody.innerHTML=&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;; //在IE下报错，目标对象错误

Versuchen Sie es nun mit dem HTML von jquery

$(tbody).html(&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;);

Ich habe festgestellt, dass jquery unter IE ohne Probleme korrekt angezeigt werden kann.

Nachdem ich die Informationen überprüft habe, habe ich herausgefunden:

jQuerys html() hat einige Elemente der nativen Dom-API innerHTML nicht unterstützt, wie z. B. die Tabelle tr und andere Elemente tr unter IE sind nur Lesen, Schreiben ist nicht erlaubt, aber in anderen Browsern gibt es kein Problem.

jquery verwendet try und Catch zur Erkennung. Wenn ein Fehler gemeldet wird, wird this.empty().append(value) erneut in Catch aufgerufen und Zeichenfolgen werden über Append hinzugefügt.

Das innereHTML einiger Elemente im IE ist schreibgeschützt:

In IE6, IE7, IE8, IE9 sind col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, tr diese Das innereHTML Das Attribut ist schreibgeschützt und kann keinem Wert zugewiesen werden. Wenn ihm ein Wert zugewiesen wird, meldet das Skript einen Fehler. In IE10 wurde das innerHTML dieser Tags so geändert, dass es beschreibbar ist.

Da die innerHTML-Attribute dieser Tags in IE6-IE9 schreibgeschützt sind, versuchen wir zu vermeiden, den innerHTML-Attributen dieser Tags Werte zuzuweisen. Beispielsweise kann das innerHTML der Tabelle in das innerHTML des geändert werden Übergeordnetes Tabellenelement (wird als p angenommen) Eigenschaftszuweisung.

2. Das von html() festgelegte Skript wird ausgeführt, das von innerHTML festgelegte Skript jedoch nicht.

Weil jQuery erzwingt, dass das Skript-Tag in der Parameterzeichenfolge wirksam wird (durch Erstellen und Ersetzen), die .innerHTML-Zuweisung jedoch nicht.

$(&#39;#app&#39;).html(&#39;<script>alert(1)</script>&#39;)  // 会弹出警告框
$(&#39;#app&#39;)[0].innerHTML = &#39;<script>alert(1)</script>&#39; // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

Erweiterte Informationen:

Vorteile der html()-Funktion

Schauen Sie sich die Mängel des innerHTML-Attributs an und Sie werden die Vorteile der html()-Funktion in jQuery kennen. Sie ist mit allen Browsern kompatibel unterstützt das HTML5-Tag nicht. Es gibt kein Problem, dass href- und src-Attribute konvertiert werden, und es gibt kein Problem, dass bestimmte Tags keine HTML-Strings festlegen können. Kurz gesagt, alles ist damit grundsätzlich problemlos in Bezug auf die Funktionsimplementierung.

Nachteile der html()-Funktion

Es scheint, dass die html()-Funktion von jQuery unendlich perfekt ist, aber in Wirklichkeit spiegelt sie nur ihre Funktion wider. Sie ist mit allen Browsern kompatibel, auch mit dem IE . Aber es ist zwar kompatibel, aber die Leistung ist nicht optimistisch. Wenn Sie die Funktion html() verwenden, um eine große Menge an HTML-Zeichenfolgen festzulegen, ist dies eine Katastrophe.

Wie gering ist die Leistung der Funktion html() unter IE? Die Computerkonfiguration ist „i5 Quad-Core, 8G Speicher, IE9“. Ich habe mit der Funktion html() getestet, um eine Tabelle mit 2000 Zeilen und 4 Spalten einzurichten, und der durchschnittliche Zeitverbrauch erreichte 27 Sekunden! Was ist der konkrete Grund, warum html() unter IE so langsam ist? Ich habe den Quellcode kurz gelesen und bin der Meinung, dass die Verwendung der Try-Methode einer der Hauptgründe ist, warum interessierte Studenten ihn eingehend studieren können.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen innerHTML und html() in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!