Spostare gli elementi nel DOM con jQuery

Mi è capitato più di una volta di dover spostare gli elementi all’interno della pagina, da un blocco a un altro, e dopo varie ricerche e conferme sono arrivato alla conclusione che jQuery è il miglior strumento per affrontare la questione.

Tutto quello che ci serve è la funzione clone, che jQuery ci mette a disposizione per duplicare gli elementi; il codice non dovrà far altro che duplicare un elemento, copiarlo all’interno del blocco di destinazione e cancellare quello originale.

Esempio

Abbiamo un blocco A e un blocco B e vogliamo trasferire il contenuto di A in B, tutto quello che dobbiamo fare è applicare quanto detto prima:

// estraggo elemento
elem = $('#A').html();
//clono elemento
e = elem.clone(true);
//inserisco l'elemento nel blocco B
$('#B').append(e);
// elimino l'originale che si trova nel blocco A
elem.remove();

Attenzione al terzo passaggio. Dal momento che l’esempio richiedeva l’inserimento del contenuto nel blocco B ho utilizzato la funzione append, ma al suo posto potreste usare funzioni comeafter(),before(),wrap() oppure html(), ovviamente in base alle circostanze.