create/append node vs innerHTML

Question

Hat jemand einen guten Grund, einen über den anderen zu verwenden? Soweit ich das beurteilen kann, verhindert create/append node, dass Sie ungültigen Code erstellen, während innerHTML Ihnen erlaubt, mehrere Knoten gleichzeitig zu injizieren.

Da ich mehrere Tags einfügen muss, scheint es sinnvoll zu sein, innerHTML zu verwenden. Hat jemand eine andere Einstellung?

Answer 1

Dies ist immer ein umstrittenes Argument, zum Teil, weil der Ursprung des innerHTML von einem Normen etwas zweifelhaft sein Perspektive. Ich denke, dass der QuirksMode-Artikel immer noch relevant ist, aber ich würde es gerne aktualisiert sehen. Vielleicht contactppk über die Aktualisierung von ihnen, obwohl ich sicher bin, dass er beschäftigt ist. Wir könnten alle von einer Leistungsüberprüfung der Annahmen profitieren, die wir in der Webentwicklung treffen. Am Ende verlangen Ansprüche harte Daten zu beweisen, sonst ist es wirklich nur zu reden.

Wie auch immer, ich habe ein wenig gesucht und einige interessante Artikel zu dieser Diskussion gefunden. Ich kann mich nicht erinnern, vorher von DocumentFragments gehört zu haben, sie sind wirklich interessant.

• DOM DocumentFragments
• jQuery Performance Rules
• Improve your jQuery - 25 excellent tips
• Speed test: innerHTML versus DOM manipulation... ein Test, der die Geschwindigkeit tatsächlich testet, lohnt sich für jeden, der einige aktuelle Daten über Browser sammeln will

Answer 2

Ich glaube, dass Sie auf bestimmten Plattformen eine Leistungssteigerung mit den DOM-Funktionen anstelle von innerHTML erhalten, da kein teures HTML-Parsing durchgeführt werden muss.

Answer 3

Es hängt davon ab, was Ihr Ziel ist.

Mit DOM-Methoden zum Einfügen von HTML in ein Dokument können Sie diese Elemente vor/nach dem Einfügen weiter bearbeiten.

Answer 4

Der Unterschied ist die Erstellung von Knoten über das DOM ist standardisiert, aber innerHTML ist nur ein De-facto-Standard. Ich habe gelesen, dass innerHTML schneller sein kann.

Eine noch bessere Alternative ist die Verwendung einer Bibliothek wie jQuery für Ihre DOM-Manipulation. Es kümmert sich um die meisten browserübergreifenden Inkompatibilitäten und ist besser lesbar als die Verwendung der DOM-Methoden.

Answer 5

Wenn Leistung zählt, ist es gut zu wissen, dass die innerHTML relativ schnell ist, vor allem in MSIE: http://www.quirksmode.org/dom/innerhtml.html

Es hat jedoch das schlechte Bild von ursprünglich ein „proprietäres Microsoft“ Eigentum und/oder nicht wirklich „OO ".

Answer 6

Da ich mehrere Tags einfügen muss, scheint es sinnvoll zu sein, innerHTML zu verwenden.

Nur 'mehrere'? Dann ist Geschwindigkeit kein Problem. Wenn du hundert erzeugst, musst du darüber nachdenken, was du tust. Es ist nicht wirklich das Erstellen, das ist das Problem, es ist die Kind-Knotenliste Manipulation, die immer langsamer wird, wenn Sie jedes zusätzliche Element hinzufügen.

Zum Anhängen haben Sie eigentlich keine Wahl. Sie können innerHTML nicht festlegen, ohne den vorhandenen Inhalt zu verlieren. Wenn Sie also mit der Serialisierung und erneuten Analyse nicht zufrieden sind (was nicht serialisierbare Daten wie Formularinhalte, JavaScript-Eigenschaften/Verweise und Ereignishandler auslöscht), landen Sie Setzen Sie das innerHTML eines anderen Elements und verschieben Sie jedes Kind nacheinander. Dies ist, was viele Frameworks tun und es endet in der Regel sogar langsamer als manuell create-and-appendChild.

Abhängig von Ihrer Situation (insbesondere: wie viele Kindknoten sind bereits im Zielelement und wie viele werden Sie hinzufügen?), Kann es schneller sein, die Operation in kleinere Manipulationen an einem DocumentFragment, dessen Kinder kann auf einmal an alle Elemente eines Elements angehängt werden. Das ist viel schneller. Leider ist es nicht möglich, innerHTML auf ein DocumentFragment zu setzen.

Es gibt auch schnellere Hacks mit Range-Objekten, um eine Last von HTML auf einmal zu verschieben, aber leider sind Ranges stark browserübergreifende Variable. Es scheint mir jedoch, dass jemand in der Lage sein sollte, ein schnelles append-html aus IE range.pasteHTML und W3 range.extractContents aufzubauen. Hat jemand Lust darauf?

Soweit ich das beurteilen kann, erstellen/anhängen Knoten einfach verhindert, dass Sie ungültigen Code Erstellen

Potenziell ungültige Markup bedeutet nicht nur Ihre Anwendung bricht in einigen Browsern. Wenn Sie blind HTML Spleißen zusammen, ohne wie ein Idiot zu entkommen:

element.innerHTML= '<a href="'+url+'">'+title+'</a>'; 

dann haben Sie eine clientseitige Cross-Site-Scripting-Sicherheitslücke, die man genauso schlecht wie eine Server-Seite ist.

Sie können natürlich Kompromisse eingehen, indem Sie die Elemente erstellen und ihre Inhalte in separaten Schritten festlegen. Zum Beispiel:

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>'; 
for (var i= 0; i<urls.length; i++) { 
    var row= element.firstChild.rows[i]; 
    row.cells[0].firstChild.data= urls[i]; 
    row.cells[1].firstChild.href= urls[i]; 
} 

(string.repeated ist JavaScript nicht Standard, aber seine Verwendung ist hier offensichtlich.)

Answer 7

DOM MANIPULATION IST SCHNELLER, WENN SIE DIESEN TRICK BENUTZEN.

Dies ist langsam:

var target = document.getElementById('whatever'); 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 

Dies ist schnell:

var target = document.createElement('span') 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 
document.getElementById('whatever').appendChild(target); 

Das erste Beispiel fügt die neu zu einem Knoten erstellt Knoten, der bereits im Inneren des Körpers enthalten ist, so ein Auffrischen jedes gemacht Zeit. Das zweite Beispiel fügt neu erstellte Knoten an einen "Puffer" -Knoten an, der nicht innerhalb des Bereichs des Körpers liegt. Daher wird keine Aktualisierung durchgeführt, bis Sie den Pufferknoten innerhalb des Bereichs des Körpers platzieren. Versuch es selber!.