I metodi di manipolazione del DOM di jQuery

  • jQuery
  • Gabriele Romanato

jQuery dispone di diversi metodi per la manipolazione del DOM. Per manipolazione del DOM si intende l'inserimento di nuovi elementi, la loro cancellazione e posizionamento nella struttura del documento. In questo articolo vedremo i metodi più significativi.

insertBefore() ed insertAfter()

Per inserire un elemento nella pagina si utilizzano in genere questi due metodi i quali inseriscono il nuovo elemento rispettivamente prima e dopo l'elemento passato come argomento.

Ipotizzando la seguente struttura:

<div id="test">
	<div id="target"></div>
</div>

Utilizzando insertBefore() in questo modo:


$('<p/>').insertBefore('#target');

avremo:


<div id="test">
	<p></p>
	<div id="target"></div>
</div>

Se invece utilizziamo insertAfter() avremo:


<div id="test">
	<div id="target"></div>
	<p></p>
</div>

append(), appendTo(), prepend(), prependTo()

Questi metodi aggiungono un elemento alla struttura dell'elemento di destinazione prima (prepend) o dopo (append) il contenuto dell'elemento. La sintassi cambia in base al metodo:

  • $(elemento).append|prepend(nuovoElemento)
  • $(nuovoElemento).appendTo|prependTo(elemento)

Esempio:


$('<p/>').appendTo('#target');
$('#target').prepend('<p/>');

che genererà la seguente struttura:


<div id="test">
	<div id="target">
		<p></p>
		<--contenuto-->
		<p></p>
	</div>
</div>

wrap(), wrapAll(), wrapInner()

Il verbo wrap in inglese indica il racchiudere qualcosa in qualcos'altro. Letteralmente significa "avvolgere", ed è esattamente quello che questi metodi fanno: essi racchiudono un elemento all'interno di un nuovo elemento HTML, ma con alcune differenze:

  • wrap() racchiude un solo elemento
  • wrapAll() racchiude più elementi
  • wrapInner() racchiude il testo dell'elemento

Esempio:


$('#target').wrap('<div id="wrapper"></div>');

che genererà la seguente struttura:


<div id="test">
  <div id="wrapper">
	<div id="target"></div>
  </div>
</div>

clone()

Questo metodo clona un elemento, ossia ne crea una copia. Accetta come parametro un valore booleano che se viene impostato su true clona anche gli eventi associati all'elemento.

Un esempio tipico è il caso in cui vogliamo spostare un elemento in un'altra posizione nel DOM:


var copy = $('#target').clone();
$('#target').remove(); // rimuove l'elemento originale
$(copy).insertBefore('#test');

La struttura generata è la seguente:


<div id="target"></div>
<div id="test"></div>

remove()

Questo metodo rimuove un elemento dal documento. Una volta rimosso, l'elemento non è più disponibile.

Torna su