logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Clonare gli elementi HTML

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()

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:

  • Il parametro selettore identifica l'elemento o gli elementi da clonare.
  • Il parametro copiareDati (facoltativo) è un valore booleano (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>

Prova!Completa gli spazi vuoti con il testo appropriato.
// Clona l'elemento
<p>Un testo d'esempio</p>

var elementoCopiato = $("#el").();