Sostituire elementi HTML

In questa lezione, vediamo come sostituire elementi all'interno della pagina HTML con i metodi .replaceWith() e .replaceAll() di jQuery.

Il metodo .replaceWith()

Il metodo .replaceWith() viene utilizzato per sostituire un elemento o un insieme di elementi con un nuovo contenuto, anche HTML.

Sintassi: $(elemento).replaceWith(nuovoContenuto, funzione). Vediamo i parametri in dettaglio:

Vediamo un esempio:

<div id="box">
  <h2>Testo di partenza</h2>
</div>
<button>Cambia testo</button>

<script>
$("button").click(function(){
  $("#box").replaceWith("<h2>Questo è il nuovo testo</h2>");
});
</script>

Nell'esempio, utilizziamo un evento di click per eseguire la funzione e sostituire il contenuto.

Il metodo .replaceAll()

Il metodo .replaceAll() viene utilizzato per sostituire tutti gli elementi corrispondenti a un selettore con un nuovo contenuto HTML.

Sintassi: $(nuovoElemento).replaceAll(selettore). Vediamo i parametri da usare:

Vediamo un esempio di .replaceAll():

<div>
  <p>Testo di partenza</p>
  <p>Testo di partenza</p>
  <p>Testo di partenza</p>
</div>
<button>Cambia testo</button>

<script>
$("button").click(function(){
  $("<p>Questo è il nuovo testo</p>").replaceAll("p");
});
</script>

Nell'esempio, tutti i <p> vengono sostituiti con il nuovo testo.

Differenza tra .replaceWith() e .replaceAll()

Tra i due metodi, c'è una differenza soltanto sintattica: .replaceWith() richiede come parametro il nuovo elemento, mentre con .replaceAll() l'elemento deve essere creato separatamente (non ti ricordi come funziona? Puoi leggere  la lezione su come creare elementi HTML con jQuery). Tuttavia, .replaceAll() è preferibile se gli elementi da sostituire sono più di uno.