Il metodo replaceWith() di jQuery

  • jQuery
  • Gabriele Romanato

Il metodo replaceWith() sostituisce un elemento con un altro elemento. Questo elemento può essere sia già presente nel DOM che creato ex novo come stringa HTML. Vediamolo in dettaglio.

Sintassi di base

$(elemento).replaceWith(elemento)

$(elemento).replaceWith(funzione)

Partendo dalla seguente struttura:


<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Possiamo scrivere:


$('div.second').replaceWith('<h2>New heading</h2>');

E otterremo:


<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>

La sostituzione può essere applicata ad un set di elementi:


$('div.inner').replaceWith('<h2>New heading</h2>');

E otterremo:


<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

Possiamo anche utilizzare un selettore per la sostituzione:


$('div.third').replaceWith($('.first'));

E otterremo:


<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

Infine, possiamo utilizzare la funzione di callback:


$('div.container').replaceWith(function() {
  return $(this).contents();
});

E otterremo:


<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
Torna su