Nella lezione precedente, abbiamo visto come sostituire elementi con altri elementi HTML. In questa lezione, vediamo come clonare gli elementi HTML utilizzando il metodo .clone() di jQuery.
Il metodo .clone() viene utilizzato per creare una copia di un elemento o di un insieme di elementi.
Sintassi: $(selettore).clone(copiareDati). I parametri da utilizzare sono:
true o false) che indica se clonare anche gli eventi e i dati associati all'elemento (impostato su false di default).Vediamo un esempio:
<button>Clona elemento</button>
<div id="el">Contenuto originale</div>
<script>
$("button").click(function(){
var elementoCopiato = $("#el").clone();
$("#el").after(elementoCopiato);
});
</script>Quando si clicca sul pulsante, con un evento di click, la funzione viene eseguita e viene salvata una copia dell'elemento <div> nella variabile elementoCopiato. Il nuovo elemento viene successivamente inserito tramite .after() (di cui abbiamo parlato nella lezione su come creare elementi HTML).
Si può anche abbreviare in una singola riga:
<button>Clona elemento</button>
<div id="el">Contenuto originale</div>
<script>
$("button").click(function(){
$("#el").clone().insertAfter("#el");
});
</script>