Il modo migliore per aggiungere elementi DOM con jQuery

Question

Quindi ho visto tre modi per aggiungere elementi html/DOM a una pagina. Sono curioso di sapere quali sono i pro e i contro per ognuno di loro.

1 - Tradizionale JavaScript

Credo che il modo JS dritto per farlo è attraverso la costruzione di ogni elemento, l'impostazione degli attributi, e poi aggiungendo. Esempio:

var myRow = document.createElement("tr"); 
myRow.class = "myClass"; 

var firstTD = document.createElement("td"); 
firstTD.innerHTML = "first"; 
myRow.appendChild(firstTD); 

var secondTD = document.createElement("td"); 
secondTD.innerHTML = "second"; 
myRow.appendChild(secondTD); 

document.getElementById("myContainer").appendChild(myRow); 

2 - Aggiunta di una serie di html tramite jQuery

ho notato che la maggior parte degli esempi di jQuery che vedo di solito basta aggiungere una stringa di codice HTML.
Esempio:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>'); 

3 - .clone di jQuery()

Ho visto anche un sacco di usi e riferimenti a .clone() in jQuery.
Esempio:

$("#myContainer").append($(".myClass").Clone()); 

mi piacerebbe sentire cosa gli altri hanno da dire su questo.

(Inoltre, questo mi sembra un buon candidato per un 'comunità wiki', ma io non sono troppo familiarità con loro. Qualcuno commento e fatemi sapere se dovrebbe essere? Grazie)

Answer 1

Se si utilizza jQuery 1.4 il modo migliore è il seguente:

$("<a/>", { 
    id: 'example-link', 
    href: 'http://www.example.com/', 
    text: 'Example Page' 
}).appendTo("body"); 

Answer 2

Il modo più semplice per fare è usare jQuery.

$('tr').addClass('myClass') come sintassi. Questo è facile da leggere, capire e mantenere.

Answer 3

Se hai già jQuery disponibile, usalo. Se non desideri ospitarla, utilizza la versione ospitata di Google. Alla fine chiama sempre i metodi nativi createElement di javascript o innerHTML. Quindi userei # 2 e # 3 se dovessi in particolare clonare un elemento esistente nella pagina.

Answer 4

Se si dispone già di un elemento di modello che si desidera copiare poi con tutti i mezzi utilizzano clone().

Ma se si vuole creare un elemento da zero poi c'è fondamentalmente due metodi che credo si allude:

1. Creare elementi DOM come oggetti (utilizzando createElement per esempio).
2. Creare elementi DOM come HTML (utilizzando innerHTML o jQuery's html() ad esempio).

Prima se uno dei metodi è più intuitivo o più facile da scrivere per te, ti consiglio di farlo.

Altrimenti i vantaggi di utilizzare quest'ultimo è che è più pulito se l'elemento ha molti bambini.Ad esempio, prova a creare una riga di tabella con 6 colonne, ciascuna con una classe diversa utilizzando il primo metodo. Il tuo codice sarà molto più lungo di se hai usato il secondo metodo.

Per quanto riguarda le prestazioni, questa è una buona guida http://andrew.hedges.name/experiments/innerhtml/ ma la risposta breve è che nella maggior parte dei casi le differenze sono piuttosto trascurabili. Una buona guida per le prestazioni in generale è: http://www.artzstudio.com/2009/04/jquery-performance-rules/. Il sesto suggerimento ha a che fare con la manipolazione del DOM.

Answer 5

Se stai lavorando con grandi quantità di HTML che vuoi riutilizzare, ti suggerisco di dare un'occhiata a: http://api.jquery.com/jQuery.template/ che è definitivo, ma verrà sostituito da qualcosa di meglio.

Lo uso in un ambiente di produzione ed è fantastico, come per i pezzi più piccoli di html che sp. Said è il modo migliore

Answer 6

Clone contenuto esistente ...

var $html = $template.clone();

 $html.find(''); ///after change content...

A causa del contenuto di clone è con le proprietà 'DOM'. Quindi puoi cambiare questo tag, proprietà, valore, quindi aggiungerlo.