Metodo add
Il metodo add aggiunge gli elementi
specificati a un set esistente di elementi.
Sintassi
Aggiunta tramite selettore:
.add(selettore);
Gli elementi da aggiungere sono specificati da uno o più elementi DOM (come array):
.add(elemento DOM);
Gli elementi da aggiungere sono specificati da un oggetto jQuery:
.add(oggetto jQuery);
Gli elementi da aggiungere sono specificati da testo html:
.add(testo html);
Gli elementi da aggiungere vengono cercati nella pagina tramite il selettore specificato, all'interno dell'area definita dal secondo parametro. L'area di ricerca può essere specificata da un elemento DOM, un oggetto jQuery o un oggetto documento:
.add(selettore, contesto);
Esempio
Troviamo tutti i paragrafi, aggiungiamo alla fine del loro
testo il simbolo '!', poi aggiungiamo ai paragrafi trovati
gli intestini h2
e simultaneamente per gli intestini e i paragrafi
impostiamo il colore rosso:
<div>ddd</div>
<h1>hhh</h1>
<p>ppp</p>
<div id="test"><h2>hhh</h2></div>
<p>ppp</p>
<h2>hhh</h2>
<p>ppp</p>
$('p').append('!').add('h2').css('color', 'red');
Esempio
Utilizziamo un contesto di ricerca - aggiungiamo
solo gli h2 che si trovano all'interno dell'elemento
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Esempio
Creiamo un contesto di ricerca come elemento DOM
tramite il metodo JavaScript
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Esempio
Spesso si può fare a meno del contesto, utilizzando semplicemente un selettore più complesso:
$('p').append('!').add('#test h2').css('color', 'red');
