Método add
El método add agrega los elementos
especificados a un conjunto existente de elementos.
Sintaxis
Agregar por selector:
.add(selector);
Los elementos a agregar se especifican mediante uno o varios elementos DOM (como un array):
.add(elemento DOM);
Los elementos a agregar se especifican mediante un objeto jQuery:
.add(objeto jQuery);
Los elementos a agregar se especifican mediante texto HTML:
.add(texto HTML);
Los elementos a agregar se buscan en la página usando el selector especificado, dentro del área definida por el segundo parámetro. El área de búsqueda puede ser un elemento DOM, un objeto jQuery o un objeto de documento:
.add(selector, contexto);
Ejemplo
Encontremos todos los párrafos, agreguemos al final
el texto '!', luego agreguemos a los párrafos encontrados
los encabezados h2
y simultáneamente para encabezados y párrafos
establezcamos el color rojo:
<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');
Ejemplo
Introduzcamos un contexto de búsqueda - agreguemos
solo aquellos h2 que están dentro del elemento
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Ejemplo
Creemos un contexto de búsqueda como un elemento DOM
usando el método JavaScript
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Ejemplo
La mayoría de las veces se puede prescindir del contexto, simplemente haciendo un selector más complejo:
$('p').append('!').add('#test h2').css('color', 'red');
