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');

검색 컨텍스트를 지정해 봅시다 - #test 요소 내부에 있는 h2만 추가합니다:

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

JavaScript 메서드 querySelector를 사용하여 DOM 요소 형태의 검색 컨텍스트를 생성합니다:

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

대부분의 경우 컨텍스트 없이도 더 복잡한 선택자를 만드는 것으로 해결할 수 있습니다:

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