Corsi on-line

Clonazione di elementi HTML con jQuery

Il framework JavaScript jQuery mette a disposizione il metodo clone(), grazie al quale sarà possibile duplicare porzioni di codice HTML all’interno di una pagina Web senza la necessità di un ulteriore caricamento; nel caso specifico di questo post cloneremo un div box e il suo contenuto e creeremo i pulsanti per la clonazione e per il reset delle modifiche. Cominciamo subito con le regole di stile da associare al div destinato alla duplicazione.

<style type="text/css">
#contenitore{
margin:4px;
padding:4px;
border:1px dashed #ccc;
}
</style>

Fatto questo, dopo aver effettuato la nostra inclusione di jQuery tra i tag “head”, andremo ad inserire le tre componenti richieste dalla nostra piccola applicazione:

 <div id="contenitore">Contenuto</div>
<p>
  <button id="clona">Clona</button>
  <button id="reset">Annulla</button>
</p>

Avremo così un div clonabile (“Contenitore”), un pulsante che richiama il metodo “clone()” e un secondo tasto per il reset riferito al metodo omonimo; non ci resterà quindi che completare l’opera definendo le funzioni necessarie:

<script type="text/javascript">
$("#clona").click(function () {
$('#contenitore').clone(false).insertAfter('#contenitore');
});
$("#reset").click(function () {
location.reload();
});
</script>

Per vostra comodità posterò il codice completo pronto per i test:

<!DOCTYPE html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
	#contenitore{
                margin:4px;
		padding:4px;
		border:1px dashed #ccc;
	}
</style>
</head>
<body>
	<div id="contenitore">Contenuto</div>
  <p>
  <button id="clona">Clona</button>
  <button id="reset">Annulla</button>
  </p>

<script type="text/javascript">
    $("#clona").click(function () {
	  $('#contenitore').clone(false).insertAfter('#contenitore');
    });
	    $("#reset").click(function () {
	  location.reload();
    });
</script>
</body>
</html>

Utilizzate e modificate il sorgente proposto per i vostri progetti, ma tenete conto di una raccomandazione: nel caso specifico l’elemento clonabile (il “div” dell’esempio) deve essere associato ad un id e non ad una classe, diversamente la clonazione sarà unitaria soltanto dopo il primo click del pulsante, successivamente sarà esponenziale.
Questo perché molto probabilmente a voi interesserà generare un solo duplicato per ogni click.

Post correlati
I più letti del mese
Tematiche