Quelle est la meilleure façon d'injecter du HTML dans le DOM avec jQuery?

Question

Je travaille sur une page de calendrier qui permet à un utilisateur de cliquer sur un jour, et d'entrer une entrée pour ce jour avec un formulaire qui apparaît.

Je ne suis pas étranger à la manipulation de DOM avec jQuery, mais c'est quelque chose que j'ai fait auparavant et je commence à me demander s'il existe un moyen plus efficace de le faire? Construire le code HTML manuellement dans JavaScript serait-il le moyen le plus efficace pour la performance (je suppose que c'est vrai, en utilisant des fonctions comme appendTo() etc.) ou créer une construction cachée dans le DOM puis le cloner mieux?

Idéalement, je veux connaître la méthode optimale pour réaliser cet équilibre entre la netteté et la performance du code.

Merci,

Est-ce

Answer 1

Travailler avec d'énormes blocs de chaînes HTML en JavaScript peut devenir très moche très rapidement. Pour cette raison, il pourrait être utile de considérer un "moteur de template" JavaScript. Ils n'ont pas besoin d'être compliqué - Découvrez this one par Resig.

Si vous n'êtes pas prêt pour cela, il est probablement bon de continuer comme vous êtes. Rappelez-vous simplement que la manipulation DOM est généralement assez lente par rapport à la manipulation de chaînes.

Un exemple de cet écart de performance:

// 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 vous pouvez trouver l'explication.

Answer 3

Peut-être pas l'approche la plus populaire.

Avoir le code html généré dans le backend. La boîte de dialogue sera dans un div caché CSS. Quand vous voulez qu'il "saute", appliquez juste différents styles de CSS et changez une valeur d'entrée cachée (je suppose que la boîte de dialogue interagit avec cette certaine date).