jQuery

[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
선택. 선택자 일치 여부를 판별 시작해야하는 문서의 지점을 지정.



 


분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인