jQuery: metodi di manipolazione del DOM

jQuery fornisce vari metodi per aggiungere, modificare o cancellare elementi del DOM nella pagina HTML.

La seguente tabella elenca alcuni importanti metodi per aggiungere/cancellare nuovi elementi nel DOM.

Metodo Descrizione
append() Inserisce il contenuto alla fine dell'elemento o degli elementi specificati da un selettore.
before() Inserisce il contenuto (elementi DOM nuovi o esistenti) prima di uno o più elementi specificati da un selettore.
after() Inserisce il contenuto (elementi DOM nuovi o esistenti) dopo uno o più elementi specificati da un selettore.
prepend() Inserisce il contenuto all'inizio di uno o più elementi specificati da un selettore.
remove() Rimuove l'elemento o gli elementi dal DOM specificato dal selettore.
replaceAll() Sostituisce l'elemento o gli elementi di destinazione con l'elemento specificato.
wrap() Avvolge una struttura HTML attorno ad ogni elemento specificato dal selettore.

jQuery after()

Il metodo jQuery after() inserisce il contenuto (elementi DOM nuovi o esistenti) dopo l'elemento o gli elementi di destinazione specificati dalla espressione di selezione.

Sintassi:

$('espressione di selezione').after('contenuto');

$('#div1').after('<div style="background-color:yellow"> Nuovo div </div>');

jQuery append()

Il metodo jQuery append() inserisce il contenuto alla fine dell'elemento o degli elementi di destinazione specificati dalla espressione di selezione.

Sintassi:

$('espressione di selezione').append('contenuto');

$('p').append('Prova testo');

jQuery prepend()

Il metodo jQuery prepend() inserisce il contenuto all'inizio di uno o più elementi specificati dalla espressione di selezione.

Sintassi:

$('espressione di selezione').prepend('contenuto');

$('div').prepend('<p>Testo da inserire</p>');

jQuery remove()

Il metodo jQuery remove() rimuove l'elemento o gli elementi come specificato dalla espressione di selezione.

Sintassi:

$('espressione di selezione').remove();

$('p').remove();

jQuery replaceAll()

Il metodo jQuery replaceAll() sostituisce tutti gli elementi di destinazione con elementi specificati.

Sintassi:

$('stringa').replaceAll('espressione di selezione');

Qui la sintassi è diversa. Specifica prima una stringa come elemento/i sostitutivo/i e poi chiamare il metodo replaceAll() con l'espressione di selezione per specificare l'elemento/i di destinazione.

$('<span>Testo sostitutivo</span>').replaceAll('p');

jQuery wrap()

Il metodo jQuery wrap() avvolge ogni elemento di destinazione con un elemento specificato.

Sintassi:

$('espressione di selezione').wrap('contenuto');

$('span').wrap('<p></p>');