Was ist der beste Weg, um HTML in das DOM mit jQuery zu injizieren?

Question

Ich arbeite an einer Kalender-Seite, die einem Benutzer ermöglicht, auf einen Tag zu klicken und einen Eintrag für diesen Tag mit einem Formular einzugeben, das angezeigt wird.

Ich bin kein Fremder DOM Manipulation mit jQuery, aber das ist etwas, was ich schon einmal getan habe und ich frage mich, ob es eine effizientere Möglichkeit, dies zu tun ist?

Wäre das manuelle Erstellen von HTML in JavaScript der effizienteste Weg performancewise (ich nehme an, dies ist wahr, über Funktionen wie appendTo() usw.) oder würde ein verstecktes Konstrukt innerhalb des DOM erstellen und dann Klonen besser sein?

Idealerweise möchte ich die optimale Methode kennen, um ein ausgewogenes Verhältnis zwischen Code-Sauberkeit und Leistung zu erreichen.

Danke,

Wird

Answer 1

Das Arbeiten mit großen Teilen von HTML-Strings in JavaScript kann sehr schnell sehr hässlich werden. Aus diesem Grund könnte es sich lohnen, eine JavaScript- "Template-Engine" in Betracht zu ziehen. Sie müssen nicht kompliziert sein - Check out this one von Resig.

Wenn Sie nicht dafür sind, dann ist es wahrscheinlich in Ordnung, einfach so zu bleiben, wie Sie sind. Denken Sie daran, dass die DOM-Manipulation im Vergleich zur String-Manipulation im Allgemeinen ziemlich langsam ist.

Ein Beispiel für diese Leistungslücke:

// DOM manipulation... slow 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>'); 
$.each(items, function(){ 
    UL.append('<li>' + this + '</li>'); 
}); 

// String manipulation...fast 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>').append('<li>' + items.join('</li><li>') + '</li>'); 

Answer 2

Here können Sie die Erklärung.

Answer 3

Vielleicht nicht der beliebteste Ansatz.

Lassen Sie den HTML-Code im Backend generiert werden. Der Dialog wird in einem css versteckten div sein. Wenn Sie wollen, dass es "pop", wenden Sie einfach verschiedene CSS-Stile an und ändern Sie einen versteckten Eingabewert (ich nehme an, der Dialog interagiert mit diesem bestimmten Datum).