Метод add

Метод add добавляет заданные элементы в уже существующий набор элементов.

Синтаксис

Добавление по селектору:

javascript.add(селектор);

Добавляемые элементы задаются одним или несколькими (массивом) DOM элементами:

javascript.add(DOM элемент);

Добавляемые элементы задаются объектом jQuery:

javascript.add(объект jQuery);

Добавляемые элементы задаются html текстом:

javascript.add(html текст);

Добавляемые элементы ищутся на странице с помощью заданного селектора, внутри области, заданной вторым параметром. Область поиска может быть задана DOM элементом, объектом jQuery или объектом документа:

javascript.add(селектор, контекст);

Пример

Давайте найдем все абзацы, поставим им в конец текст '!', затем добавим к найденным абзацам заголовки h2 и одновременно для заголовков и абзацев поставим красный цвет:

html<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>

javascript$('p').append('!').add('h2').css('color', 'red');

Пример

Давайте введем контекст поиска - добавим только те h2, которые лежат внутри элемента #test:

javascriptlet $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');

Пример

Создадим контекст поиска в виде DOM элемента с помощью JavaScript метода querySelector:

javascriptlet context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');

Пример

Чаще всего можно обойтись и без контекста, просто сделав более сложный селектор:

javascript$('p').append('!').add('#test h2').css('color', 'red');

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