Inserire elementi contigui e avvolgere elementi

Inserire elementi contigui

Con questo gruppo di metodi possiamo inserire elementi prima o dopo un determinato punto del DOM nello stesso modo del gruppo precedente. I metodi da utilizzare sono .after() / .before() e .insertAfter() / .insertBefore():

//due modi per inserire una nuova lista DOPO una già presente
$("#menu").after("<ul id='menu2'></ul>");
$("<ul id='menu2'></ul>").insertAfter("#menu");
//due modi per inserire una nuova lista PRIMA di una già presente
$("#menu").before("<ul id='menu2'></ul>");
$("<ul id='menu2'></ul>").insertBefore("#menu");

Avvolgere gli elementi

Attraverso questi metodi è possibile avvolgere gli elementi della collezione con una struttura HTML predefinita (sia nuova che preesistente nel documento). Il metodo principale di questo gruppo è .wrap() che accetta come argomento sia codice HTML sia un riferimento ad un elemento specifico:

$("p").wrap("<div></div>");
$("p").wrap(document.createElement("div"));

Con il codice precedente avvolgeremo ogni paragrafo in un tag div. Se invece vogliamo raccogliere gli elementi della collezione all'interno di un contenitore dobbiamo usare .wrapAll():

$("p").wrapAll("<div></div>");
$("p").wrapAll(document.createElement("div"));

Con quest'ultimo metodo gli elementi della collezione vengono raggruppati in corrispondenza del primo elemento trovato e quindi avvolti. Ecco un esempio.

Un ultimo metodo che lavora sui nodi figli degli elementi è .wrapInner(), molto utile nel caso volessimo nidificare parti del documento senza dover agire direttamente sull'HTML di origine (magari per applicare particolari stili CSS):

<p>Testo</p>
$("p").wrapInner("<span></span>");
<p><span>Testo</span></p>

Come gli altri metodi del gruppo, anche .wrapInner() accetta riferimenti diretti ad elementi.