add-metodi
add-metodi lisää annetut
elementit olemassa olevaan elementtijoukkoon.
Syntaksi
Lisääminen valitsimella:
.add(valitsin);
Lisättävät elementit määritetään yhdellä tai useammalla (taulukkona) DOM-elementillä:
.add(DOM-elementti);
Lisättävät elementit määritetään jQuery-objektilla:
.add(jQuery-objekti);
Lisättävät elementit määritetään html-tekstillä:
.add(html-teksti);
Lisättävät elementit etsitään sivulta käyttämällä annettua valitsinta, toisella parametrillä määritetyn alueen sisällä. Hakualue voidaan määrittää DOM-elementtinä, jQuery-objektina tai dokumenttiobjektina:
.add(valitsin, konteksti);
Esimerkki
Etsitään kaikki kappaleet, lisätään niiden loppuun
teksti '!', sitten lisätään löydettyihin kappaleisiin
otsikot h2
ja samanaikaisesti sekä otsikoille että kappaleille
asetetaan punainen väri:
<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');
Esimerkki
Otetaan käyttöön hakukonteksti - lisätään
vain ne h2, jotka sijaitsevat elementin
#test sisällä:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Esimerkki
Luodaan hakukonteksti DOM-elementtinä
käyttämällä JavaScript-metodia
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Esimerkki
Useimmiten voidaan pärjätä ilman kontekstia, tekemällä vain monimutkaisemman valitsimen:
$('p').append('!').add('#test h2').css('color', 'red');
