logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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:

  • Il parametro nuovoContenuto (obbligatorio) specifica il nuovo contenuto. Può essere un elemento HTML, un insieme di elementi HTML o un testo.
  • Il parametro funzione (facoltativo) indica una funzione da eseguire quando .replaceWith() viene eseguito.

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:

  • Il parametro nuovoElemento specifica il nuovo elemento HTML da sostituire. Deve necessariamente contenere tag HTML.
  • Il parametro selettore specifica il selettore degli elementi da sostituire.

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.

Prova!Completa gli spazi vuoti con il testo appropriato.
<p>Un testo d'esempio</p>

// Sostituisci il testo con il nuovo elemento
$("").("<p>Nuovo elemento</p>);

Prova!Scegli l'opzione corretta tra quelle elencate.
// Sostituisci tutti gli elementi
$("<p>Nuovo elemento</p>")._____("p");