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');
예제
검색 컨텍스트를 지정해 봅시다 -
#test 요소 내부에 있는
h2만 추가합니다:
javascriptlet $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
예제
JavaScript 메서드
querySelector를 사용하여
DOM 요소 형태의 검색 컨텍스트를 생성합니다:
javascriptlet context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
예제
대부분의 경우 컨텍스트 없이도 더 복잡한 선택자를 만드는 것으로 해결할 수 있습니다:
javascript$('p').append('!').add('#test h2').css('color', 'red');