[Traversing] JQ - add() 메서드 ★ - 일치하는 요소 집합에 지정 요소가 추가된 새 jQuery 객체 생성. (= add메서드 = 애드메서드)

1. add() 예제 - p와 모든 span 요소에 배경색 추가
2. add() 예제 - p와 첫 번째 span 요소만 배경색 추가
3. add() 예제 - p에 span 요소 생성해 붙이기
4. add() 정의
5. add() 구문

add() 예제 - p와 모든 span 요소에 배경색 추가

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("h1").add("p").add("span").css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴</h1>

<p>Homzzang.com</p>

<p>홈페이지 제작 강의</p>

<span>HTML</span>

<span>CSS</span>

<span>JS</span>

<br><br>

<div>그누보드, 영카트 계열 빌더 테마 연구</div>

결과 보기

add() 예제 - p와 첫 번째 span 요소만 배경색 추가

 
$("h1").add("p").add(document.getElementsByTagName("span")[0]).css("background-color", "yellow");

 

add() 예제 - p에 span 요소 생성해 붙이기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").add("<br><span>Homzzang.com</span>").appendTo("p");

    });

});

</script>

<button>암기해!</button>

<p>홈짱닷컴 주소 잊지 마.</p>

결과 보기

add() 정의

일치하는 요소 집합에 지정 요소가 추가된 새 jQuery 객체 생성.

 

---

1.
전체 문서에 요소를 추가하거나,
context 매개변수 지정된 경우 context 요소 내부에 요소를 추가.

 

2. jQuery add() 예제 보기

https://api.jquery.com/add/

 

add() 구문

 

$(selector).add(element,context)

 

---

[매개변수]

 

element
필수. 기존 요소그룹에 추가할 선택자.
기존 요소 그룹에 추가할 (jQuery 객체, 하나 이상의 요소, 또는 HTML 정보)를 지정.

 

context
선택. 선택자 일치 여부를 판별 시작해야하는 문서의 지점을 지정.