• Q&A
  • 회원가입
  • 로그인

[Traversing] JQ - add() 메서드 ★ - 일치하는 요소집합에 요소추가

137  

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

 

<!DOCTYPE html>

<html>

<head>

<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>


</head>

<body>


<h1>홈짱닷컴</h1>

<p>Homzzang.com</p>

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


<span>HTML</span>

<span>CSS</span>

<span>JS</span>


<br><br>


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


</body>

</html>

 

결과 보기

 

 

 

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

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

 


 

 

예제3 - p에 span 요소 생성해 붙이기

 

<!DOCTYPE html>

<html>

<head>

<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>


</head>

<body>


<button>암기해!</button>


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


</body>

</html>

 

결과 보기

 

 

 

add () 메서드 정의와 사용법


기존 요소 그룹에 요소를 추가.

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

 

 

 

 

구문

 

$(선택자).add(element,context)

 

 

 

 

 

매개변수

 

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

 

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

 



찾아주셔서 감사합니다. Since 2012