Qual è il modo migliore per iniettare HTML nel DOM con jQuery?

Question

Sto lavorando a una pagina del calendario che consente a un utente di fare clic su un giorno e inserire una voce per quel giorno con un modulo che si apre.

Sono estraneo alla manipolazione del DOM con jQuery, ma questo è qualcosa che ho fatto prima e io sto cominciando a chiedersi se c'è un modo più efficace per fare questo?

Costruire l'HTML manualmente all'interno di JavaScript è il modo più efficiente in termini di rendimento (presumo che sia vero, oltre l'utilizzo di funzioni come appendTo() ecc.) O creando un costrutto nascosto all'interno del DOM e poi clonandolo sia meglio?

Idealmente, desidero conoscere il metodo ottimale per ottenere questo equilibrio tra la precisione del codice e le prestazioni.

Grazie,

Will

Answer 1

Lavorare con enormi pezzi di stringhe di codice HTML in JavaScript può diventare molto brutto molto rapidamente. Per questo motivo potrebbe valere la pena considerare un "motore di template" JavaScript. Non devono essere complicati: dai un'occhiata a this one di Resig.

Se non siete in su per che poi è probabilmente bene a continuare così come sei. Ricorda solo che la manipolazione del DOM è in genere piuttosto lenta rispetto alla manipolazione delle stringhe.

Un esempio di questo divario di prestazioni:

// 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 potete trovare la spiegazione.

Answer 3

Forse non è il metodo più popolare.

Avere il codice html generato nel back-end. La finestra di dialogo sarà in un css nascosto div. Quando vuoi farlo "pop", basta applicare diversi stili CSS e modificare un valore di input nascosto (credo che il dialogo interagisca con quella data certa).