Метод add - добавление элементов в набор
Метод add добавляет заданные
элементы в уже существующий набор элементов.
Синтаксис
Добавление по селектору:
.add(селектор);
Добавляемые элементы задаются одним или несколькими (массивом) DOM элементами:
.add(DOM элемент);
Добавляемые элементы задаются объектом jQuery:
.add(объект jQuery);
Добавляемые элементы задаются html текстом:
.add(html текст);
Добавляемые элементы ищутся на странице с помощью заданного селектора, внутри области, заданной вторым параметром. Область поиска может быть задана DOM элементом, объектом jQuery или объектом документа:
.add(селектор, контекст);
Пример
Давайте найдем все абзацы, поставим им в конец
текст '!', затем добавим к найденным абзацам
заголовки h2
и одновременно для заголовков и абзацев
поставим красный цвет:
<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');
Пример
Давайте введем контекст поиска - добавим
только те h2, которые лежат внутри элемента
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Пример
Создадим контекст поиска в виде DOM элемента с
помощью JavaScript метода
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Пример
Чаще всего можно обойтись и без контекста, просто сделав более сложный селектор:
$('p').append('!').add('#test h2').css('color', 'red');