JavaScript  »  Guide  »  Guida jQuery 

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

Altri articoli

Altre guide

Altre newsletter