# Метод 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');`

## Смотрите также

- метод `addBack`,
  который добавляет элементы из предыдущего набора к текущему
- метод `end`,
  который возвращает предыдущий набор элементов в текущей цепочке методов

← →
↑