Az add metódus
Az add metódus a megadott
elemeket hozzáadja egy már létező elemi halmazhoz.
Szintaxis
Hozzáadás szelektorral:
.add(szelektor);
A hozzáadandó elemek egy vagy több (tömbben) DOM elemként adhatók meg:
.add(DOM elem);
A hozzáadandó elemek jQuery objektumként adhatók meg:
.add(jQuery objektum);
A hozzáadandó elemek html szövegként adhatók meg:
.add(html szöveg);
A hozzáadandó elemek a második paraméterrel megadott környezeten belül kerülnek megkeresésre az oldalon a megadott szelektor segítségével. A keresési környezet megadható DOM elemként, jQuery objektumként vagy dokumentum objektumként:
.add(szelektor, kontextus);
Példa
Keressük meg az összes bekezdést, állítsuk a szövegük végére
a '!' karaktert, majd adjuk a talált bekezdésekhez
a h2
címkéket, és egyszerre állítsuk be a címkék és bekezdések
színét pirosra:
<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');
Példa
Vezessünk be keresési kontextust - adjuk hozzá
csak azokat a h2 címkéket, amelyek a
#test elemen belül helyezkednek el:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Példa
Hozzunk létre keresési kontextust DOM elemként a JavaScript
querySelector
metódusával:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Példa
Legtöbbször meg lehet úszni kontextus nélkül is, egyszerűen egy összetettebb szelektort készítve:
$('p').append('!').add('#test h2').css('color', 'red');
