🔄 Guida: Scambio di DIV con JavaScript

Benvenuto nella guida completa per creare effetti di scambio DIV con JavaScript!

In questa guida imparerai come creare uno degli effetti più accattivanti per impressionare i visitatori del tuo sito: l'inversione dinamica della posizione di due DIV attraverso un semplice script JavaScript.

📋 Panoramica del Progetto

L'effetto che andremo a creare permette di invertire la posizione di due DIV con un semplice click. Questa tecnica è utilizzabile per qualsiasi tipo di contenuto, dalle semplici porzioni di testo a intere sezioni del sito.

💡 Applicazioni Pratiche

Immagina di avere un sito con:

Con questo script puoi permettere agli utenti di invertire le posizioni, spostando il menu a destra e il contenuto a sinistra!

🎯 Esempio Funzionante

Clicca sul pulsante per scambiare i DIV

DIV con elementi HTML

  • 🎨 Elemento lista 1
  • 🚀 Elemento lista 2
  • ⭐ Elemento lista 3

Questo DIV contiene elementi HTML formattati

DIV senza elementi HTML complessi

Questo è un semplice testo generico senza elementi HTML complessi.

📝 Contenuto testuale semplice

🔧 Implementazione del Codice

Il codice è composto da 3 parti principali:

1. Sezione HTML

Contiene la struttura base con i DIV da invertire ed il loro contenuto:

<center>
<h3>Click on a DIV to swap the content</h3>
</center>
<br>
<button id="switch"> click me </button>
<div id="divcont">
<div id="div1">
  div <b>with</b> HTML tags
 <hr>
<ul>
  <li> List item 1</li>
</ul>
</div>
<div id="div2">
  div <b>without</b> HTML tags
<hr>
generic text line
</div>
</div>

2. Sezione CSS

Definisce gli stili dei DIV per renderli visivamente accattivanti:

div:hover {
  cursor: pointer;
}
#div1 {
  width: 60%;
  margin: 10px;
  padding: 10px;
  color: black; 
  background-color: green;
}
#div2 {
  width: 60%;
  margin: 10px;
  padding: 10px;
  color: black; 
  background-color: violet;
}
#divcont {
  display: flex;
  width: 70%;
  justify-content: center;
  margin: auto;
}
#switch {
  display: block;
  margin: auto;
  background-color: white;
  padding: 10px 35px;
  font-size: 1.3rem;
  border-radius: 10px;
}

3. Sezione JavaScript

Contiene lo script che "fa la magia" dello scambio:

var div_cont = document.getElementById('divcont');
var div_sw = document.getElementById('switch');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

var div_array = [];
div_array[0] = div1;
div_array[1] = div2;

for (var i=0; i<div_array.length; i+=1) {
    div_cont.appendChild(div_array[i]);
}

document.body.appendChild(div_cont);
div_sw.onclick = function() {
    
    if (div_array[0] === div1){
        div_array[0] = div2;
        div_array[1] = div1;
    } else if (div_array[0] === div2){
        div_array[0] = div1;
        div_array[1] = div2;
    }
    
    for (var i=0; i<div_array.length; i+=1) {
        div_cont.appendChild(div_array[i]);
    }
}

📝 Spiegazione del Funzionamento

Passo 1: Riferimenti agli Elementi

Lo script inizia ottenendo i riferimenti agli elementi DOM necessari attraverso getElementById().

Passo 2: Array di Controllo

Viene creato un array div_array che mantiene l'ordine corrente dei DIV.

Passo 3: Posizionamento Iniziale

I DIV vengono aggiunti al contenitore nell'ordine iniziale usando appendChild().

Passo 4: Gestore dell'Evento Click

Quando viene cliccato il pulsante, l'ordine nell'array viene invertito e i DIV vengono riposizionati.

🎯 Concetto Chiave

Il trucco sta nell'utilizzo di appendChild(): quando si aggiunge un elemento che è già presente nel DOM, viene automaticamente spostato nella nuova posizione invece di essere duplicato!

🚀 Personalizzazioni Possibili

✨ Conclusione

Questo semplice ma efficace script JavaScript dimostra come poche righe di codice possano creare un effetto visivo impressionante. La tecnica è facilmente estendibile e può essere applicata a qualsiasi tipo di contenuto web.

💡 Suggerimento: Prova a modificare gli stili CSS e il contenuto dei DIV per creare la tua versione personalizzata!