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