Metoden add
Metoden add legger til de spesifiserte
elementene i et allerede eksisterende sett med elementer.
Syntaks
Legge til via en velger:
.add(velger);
Elementene som legges til, spesifiseres med ett eller flere (som en array) DOM-elementer:
.add(DOM-element);
Elementene som legges til, spesifiseres med et jQuery-objekt:
.add(jQuery-objekt);
Elementene som legges til, spesifiseres med html-tekst:
.add(html-tekst);
Elementene som skal legges til, søkes etter på siden ved hjelp av den angitte velgeren, innenfor et område spesifisert av den andre parameteren. Søkeområdet kan være et DOM-element, et jQuery-objekt eller et dokumentobjekt:
.add(velger, kontekst);
Eksempel
La oss finne alle avsnitt, sette teksten
'!' på slutten av dem,
deretter legge til overskriftene h2
til de funnete avsnittene
og samtidig for både overskrifter og avsnitt
sette rød farge:
<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');
Eksempel
La oss introdusere en søkekontekst - la oss legge til
kun de h2 som ligger inne i elementet
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Eksempel
La oss opprette en søkekontekst i form av et DOM-element med
hjelp av JavaScript-metoden
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Eksempel
Som oftest kan man klare seg uten kontekst, ganske enkelt ved å lage en mer kompleks velger:
$('p').append('!').add('#test h2').css('color', 'red');
