2013-08-29 12 views
9

Entschuldigung für ein JavaScript-Noob, aber kann jemand bitte erklären, warum es empfohlen wird, .innerHTML nicht zu verwenden. Wenn wir etwas schneller und einfacher in Form von .innerHTML haben, warum sollten wir es nicht benutzen?Warum wird empfohlen, .innerHTML zu vermeiden?

+1

Wer sagt, dass Sie es nicht verwenden sollten? Und was ist schneller als was? – Steve

+2

'innerHTML' arbeitet auf serialisierten Daten, was nicht die Art ist, wie DOM konzeptuell funktioniert. Es ist relativ einfach, etwas zu vermasseln, wenn man große HTML-Stücke manuell erstellt, was schwieriger zu warten ist. Außerdem ist HTML in JS in den Augen vieler erfahrener JS-Entwickler schrecklich hässlich (und Sie werden sicherlich dasselbe denken, wenn Sie sehen, dass die Hälfte einer JS-Datei HTML mit JavaScript gemischt ist). Aus diesem Grund haben wir JS-Template-Engines und auch das Angular-Framework. Aber ja, Sie können HTML in JS einfügen, ohne Probleme mit der Funktionalität zu haben (speichern Sie einige Fälle mit dem alten IE, wie von @Evan beantwortet). –

Antwort

12

innerHTML ist ein Vorschlaghammer. Es wird den Inhalt des ausgewählten DOM-Elements wegblasen und durch das ersetzen, was gerade zugewiesen wird. Dies führt zu einer Reihe von HTML-Escape- und Validierungsproblemen.

Noch wichtiger ist, dass bei Seiten mit einer großen Anzahl von Ereignissen die Verwendung von innerHTML zum Anhängen eines anderen Elements DOM-Elemente neu generiert, wodurch Ereignisbindungen verloren gehen können.

Es gibt auch einige Probleme in Bezug auf Speicherverluste in älteren Versionen von IE, wenn Elemente aus dem DOM entfernt werden.


Mit all das gesagt ist, ich sage Ihnen nicht, dass Sie nicht innerHTML verwendet werden soll. Ich benutze es die ganze Zeit in jQuery, wenn ich $(selector).html() verwende. Manchmal ist ein Vorschlaghammer das richtige Werkzeug für den Job, und wenn Ereignisse richtig delegiert werden, ist es egal, wie viel der Inhalt neu geladen wird.

+1

+1, ich hatte die Leute, die 'element.innerHTML + = ... probierten, fast vergessen, dann merkte man, wie alle Event-Handler/zugehörigen Widgets von den Nachkommen dieses Elements zerstört wurden. –

+0

IIRC Ich erinnere mich an Resig einige Hacks für verschiedene Browser wegen der Disparität in der Leistung von innerHtml. Ich schätze, ein Grund mehr, einen Wrapper zu benutzen. –

+0

+1, ich mag die Vorschlaghammer Analogie. Wenn Sie wissen, wie man innerHTML korrekt verwendet, können Sie viel Zeit sparen ... solange Sie nicht schlau arbeiten müssen. Genau wie der Hammer. – Steve

Verwandte Themen