Clonare elementi HTML con JavaScript

Le potenzialità di JavaScript sono pressoché illimitate. Con questo linguaggio di programmazione è possibile agire su ogni singolo elemento presente in una pagina HTML molto facilmente, e cambiarne il contenuto o la tipologia, modificarlo, cancellarlo o duplicarlo.

In questo articolo parleremo proprio di quest’ultima funzione, la duplicazione o clonazione di un elemento HTML.

Nello specifico vedremo una funzione JavaScript per clonare un oggetto presente in una pagina HTML con un semplice click su di un pulsante, senza limite.

Programmare questa funzione richiede poco tempo e nessuna conoscenza avanzata di JavaScript. Se non ti interessa capire il funzionamento dello script, puoi visualizzare la demo in fondo alla pagina dove potrai anche copiare il codice per l’integrazione nel tuo sito.

Clonare elementi con JavaScript

La guida è suddivisa in due step, la prima riguarda la creazione degli elementi da clonare in HTML, più il pulsante da cliccare per eseguire lo script.

Il secondo passaggio invece è per la programmazione della funzione vera e propria in JavaScript.

Ogni passaggio sarà spiegato dettagliatamente e successivamente potrai trovare il codice completo.

Nel codice non saranno aggiunte regole di stile CSS. Per questo potrai modificare a tuo piacimento lo stile degli elementi.

HTML

Iniziamo con il definire gli elementi HTML all’interno della pagina, su cui andranno assegnati i selettori e tutti gli attributi necessari al funzionamento dello script.

Questo è il codice di esempio, di seguito la spiegazione.

<div class="container">
   <div class="item" id="obj">
  Clonami
   </div>
</div>

<button onclick="copy()">
   + Copia
</button> 
  • Il primo <div> HTML è il contenitore (container) in cui verranno copiati i successivi “items“. Questo “div” è importante da impostare, poiché in sua assenza tutti gli elementi verrebbero copiati nel “body” della pagina, in modo non controllato.
  • Il secondo <div> è quello che verrà clonato, con le stesse caratteristiche, la stessa classe e lo stesso contenuto. Tramite lo script JS faremo in modo che l’id resti univoco per ognuno di questi elementi, aggiungendo un numero e incrementandolo di volta in volta.
  • L’elemento <button> servirà ad eseguire la funzione JavaScript chiamata “copy()“, con l’evento “onclick“.

JavaScript

Per far funzionare tutto correttamente, non resta che programmare lo script JS.

Le righe di codice di cui avremo bisogno sono poche, e in base alle differenti esigenze alcune possono anche essere rimosse.

var n = 0;     //variabile per incrementare l'ID
var original = document.getElementById('obj');
function copy() {
	var copy = original.cloneNode(true);
  copy.id = "obj" + ++n;  //Assegna e incrementa il numero nell'ID
  original.parentNode.appendChild(copy);
}

La riga 1 e la riga 5 possono essere eliminate dallo script se non si ha bisogno di assegnare ID agli elementi clonati.

  • La prima variabile (n) serve a generare un numero da assegnare agli ID degli elementi clonati, per renderli univoci.
  • La seconda variabile (original) preleva i dati dal “div” originale con id “obj” (che abbiamo visto nel codice HTML); dati che poi verranno clonati.
  • Successivamente è stata creata la funzione “copy()“, che clona il “div” nello stesso contenitore (parent) dell’originale.

La funzione verrà poi richiamata dal “button” HTML.

Demo

Qui la Demo generata da Codewith.it:

Codice completo

Qui di seguito il codice completo. Copialo e incollalo nel tuo sito per l’integrazione.

<div class="container">
   <div class="item" id="obj">
  Clonami
   </div>
</div>

<button onclick="copy()">
   + Copia
</button> 

<script>
var n = 0;     //variabile per incrementare l'ID
var original = document.getElementById('obj');
function copy() {
	var copy = original.cloneNode(true);
  copy.id = "obj" + ++n;  //Assegna e incrementa il numero nell'ID
  original.parentNode.appendChild(copy);
}

</script>

Potrebbe interessarti: Come creare una tabella con ricerca HTML&JS

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA