De add methode
De methode add voegt de opgegeven
elementen toe aan een bestaande set elementen.
Syntaxis
Toevoegen via selector:
.add(selector);
Toe te voegen elementen worden opgegeven als één of meerdere (een array) DOM elementen:
.add(DOM element);
Toe te voegen elementen worden opgegeven als een jQuery object:
.add(jQuery object);
Toe te voegen elementen worden opgegeven als html tekst:
.add(html tekst);
Toe te voegen elementen worden op de pagina gezocht met behulp van de opgegeven selector, binnen het gebied opgegeven door de tweede parameter. Het zoekgebied kan worden opgegeven als een DOM element, een jQuery object of een document object:
.add(selector, context);
Voorbeeld
Laten we alle alinea's vinden, er aan het einde
de tekst '!' aan toevoegen,
dan de kopjes h2
toevoegen aan de gevonden alinea's
en gelijktijdig voor de kopjes en alinea's
een rode kleur instellen:
<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');
Voorbeeld
Laten we een zoekcontext introduceren - voeg alleen
die h2 toe, die zich binnen het element
#test bevinden:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Voorbeeld
Laten we een zoekcontext creëren als een DOM element met
behulp van de JavaScript methode
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Voorbeeld
Meestal kan worden volstaan zonder context, door simpelweg een complexere selector te maken:
$('p').append('!').add('#test h2').css('color', 'red');
