Méthode add
La méthode add ajoute les éléments
spécifiés à un ensemble d'éléments existant.
Syntaxe
Ajout par sélecteur :
.add(sélecteur);
Les éléments à ajouter sont spécifiés par un ou plusieurs éléments DOM (par un tableau) :
.add(élément DOM);
Les éléments à ajouter sont spécifiés par un objet jQuery :
.add(objet jQuery);
Les éléments à ajouter sont spécifiés par un texte html :
.add(texte html);
Les éléments à ajouter sont recherchés sur la page à l'aide du sélecteur spécifié, dans la zone définie par le deuxième paramètre. La zone de recherche peut être définie par un élément DOM, un objet jQuery ou un objet document :
.add(sélecteur, contexte);
Exemple
Trouvons tous les paragraphes, ajoutons à la fin
le texte '!', puis ajoutons aux paragraphes trouvés
les titres h2
et simultanément pour les titres et les paragraphes,
définissons la couleur rouge :
<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');
Exemple
Utilisons un contexte de recherche - ajoutons
uniquement les h2 qui se trouvent à l'intérieur de l'élément
#test :
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Exemple
Créeons un contexte de recherche sous forme d'élément DOM avec
la méthode JavaScript
querySelector :
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Exemple
Le plus souvent, on peut se passer de contexte en utilisant simplement un sélecteur plus complexe :
$('p').append('!').add('#test h2').css('color', 'red');
