In alcuni casi, più che aggiungere o spostare gli elementi potrebbe
essere necessario rimpiazzarne alcuni con altri, sia nuovi che già
presenti nella pagina. A questo scopo il metodo da utilizzare è .replaceWith(), che accetta come argomento un oggetto jQuery oppure semplice codice HTML (esempio)
//rimpiazza l'elemento segnaposto
$("#segnaposto").replaceWith("<p>Nuovo contenuto</p>");
$("#segnaposto").replaceWith($("p#nuovoContenuto"));
Da notare che l'oggetto jQuery restituito conterrà comunque nella sua collezione l'elemento appena sostituito:
$("div:first").replaceWith("<p></p>").is("div");
//restituisce true!
Un'altro metodo per la sostituzione è .replaceAll(),
che inverte l'ordine degli argomenti percui tutti gli elementi della
collezione sostutuiranno quelli definiti dal selettore CSS passato al
metodo:
//rimpiazza l'elemento segnaposto
$("<p>Nuovo contenuto</p>").replaceAll("#segnaposto");
Rimuovere, Svuotare e Duplicare
Gli ultimi metodi del gruppo assolvono ad alcune funzioni
fondamentali per una moderna applicazione web rendendo come sempre il
processo molto semplice.
Anzittutto com .empty()
possiamo svuotare un elemento di tutto il suo contenuto; utilizzeremo
questo metodo, ad esempio, per cancellare il testo di un box a comparsa:
$("#messaggio").empty();
Nel caso invece volessimo rimuovere completamente un elemento utilizzeremo .remove(), passandogli eventualmente un selettore per filtrare gli elementi da eliminare:
$("table #riga1").remove();
//equivale a
$("table tr").remove("#riga1");
Sebbene i due esempi qui sopra possano sembrare uguali è bene ricordare che nel primo caso jQuery manterrà un riferimento nella collezione all'elemento #riga1, sul quale potremo comunque continuare a lavorare anche se non esiste piùfisicamente nel documento:
$("table #riga1").remove().attr("id");
//restituisce "riga1"
Chiude il gruppo il metodo .clone(), che molto
semplicemente duplica gli elementi selezionati e li ridefinisce come
elementi della collezione. Poiché questo metodo si limita a clonare,
dovremo utilizzare gli altri metodi del gruppo manipulation per
inserire i cloni all'interno del documento:
//clonare una lista
$("#menu li").clone().appendTo("#menu2");
Questo metodo, inoltre, non copia gli eventi associati agli elementi della collezione se non viene indicato esplicitamente passandogli true come argomento:
//clonare una lista con gli eventi JavaScript associati
$("#menu li").clone(true).appendTo("#menu2");
Ecco alcuni esempi dimostrativi