CONTATTACI

Guide per aspiranti programmatori

Sviluppatore dall'aria dubbiosa che si interroga su che cos'è jquery
Lezione 17 / 36

Sostituire, rimuovere e clonare elementi nel DOM con jQuery

La manipolazione di elementi nel Document Object Model (DOM) è una pratica comune nello sviluppo web. jQuery, con la sua ricca libreria di funzioni, rende queste operazioni semplici e intuitive. Esploriamo come jQuery può essere utilizzato per sostituire, rimuovere e clonare elementi nel DOM, capacità essenziali per gestire le interfacce utente dinamiche.

 

Sostituire Elementi nel DOM con jQuery

Metodi `.replaceWith()` e `.replaceAll()`

jQuery offre due metodi principali per sostituire gli elementi: `.replaceWith()` e `.replaceAll()`. 

  • `.replaceWith()`: Sostituisce l’elemento selezionato con un nuovo elemento o contenuto.

      $("#elementoDaSostituire").replaceWith("<div>Nuovo contenuto</div>");

      In questo esempio, l’elemento con l’ID `elementoDaSostituire` viene sostituito con un nuovo `div`.

  • `.replaceAll()`: Sostituisce tutti gli elementi corrispondenti al selettore specificato con l’elemento selezionato.

      $("<div>Nuovo contenuto</div>").replaceAll(".elementiDaSostituire");

     Qui, tutti gli elementi con la classe `elementiDaSostituire` vengono sostituiti con un nuovo `div`.

Rimuovere Elementi dal DOM con jQuery

Metodi `.remove()` e `.empty()`

Per rimuovere elementi dal DOM, jQuery fornisce i metodi `.remove()` e `.empty()`.

  • `.remove()`: Rimuove l’elemento selezionato dal DOM, incluse tutte le sue interazioni come eventi e dati associati.

      $("#elementoDaRimuovere").remove();

      Questo codice rimuove l’elemento con l’ID `elementoDaRimuovere` dal DOM.

  • `.empty()`: Svuota tutti i contenuti dell’elemento selezionato, rimuovendo tutti i suoi figli ma mantenendo l’elemento stesso nel DOM.

      $("#containerDaSvuotare").empty();

    Con questo comando, tutti i figli all’interno dell’elemento `containerDaSvuotare` vengono rimossi, lasciando il container vuoto.

 

Clonare Elementi nel DOM con jQuery

Metodo `.clone()

Il metodo `.clone()` crea una copia esatta dell’elemento selezionato, inclusi tutti gli attributi e, opzionalmente, tutti gli eventi associati.

let elementoClonato = $("#elementoDaClonare").clone();

Questo crea una copia dell’elemento con l’ID `elementoDaClonare`. Se si desidera clonare anche gli eventi, si può utilizzare `.clone(true)`.

 

Esempi Pratici

Consideriamo la seguente struttura HTML:

<div id="container">
    <div id="elementoDaSostituire">Vecchio Contenuto</div>
    <div id="elementoDaClonare">Clonami</div>
</div>

Sostituire un Elemento

$("#elementoDaSostituire").replaceWith("<div>Nuovo Contenuto</div>");

Clonare un elemento

let clone = $("#elementoDaClonare").clone();
$("#container").append(clone);

La capacità di sostituire, rimuovere e clonare elementi nel DOM è fondamentale nello sviluppo web moderno. jQuery semplifica queste operazioni, rendendo la manipolazione del DOM più accessibile e gestibile.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.