Método add
O método add adiciona os
elementos especificados a um conjunto existente de elementos.
Sintaxe
Adição por seletor:
.add(seletor);
Os elementos a serem adicionados são especificados por um ou vários (array) elementos DOM:
.add(elemento DOM);
Os elementos a serem adicionados são especificados por um objeto jQuery:
.add(objeto jQuery);
Os elementos a serem adicionados são especificados por texto HTML:
.add(texto HTML);
Os elementos a serem adicionados são procurados na página usando o seletor especificado, dentro de uma área definida pelo segundo parâmetro. A área de busca pode ser um elemento DOM, um objeto jQuery ou um objeto de documento:
.add(seletor, contexto);
Exemplo
Vamos encontrar todos os parágrafos, adicionar o texto
'!' no final deles,
depois adicionar aos parágrafos encontrados
os títulos h2
e simultaneamente para títulos e parágrafos
definir a cor vermelha:
<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');
Exemplo
Vamos introduzir um contexto de busca - adicionar
apenas os h2 que estão dentro do elemento
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Exemplo
Vamos criar um contexto de busca como um elemento DOM usando
o método JavaScript
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Exemplo
Na maioria das vezes, podemos evitar o contexto, fazendo simplesmente um seletor mais complexo:
$('p').append('!').add('#test h2').css('color', 'red');
