[HTML_CSS] JQ - wrapAll() 메서드 - 선택요소 모두를 한번에 지정 요소로 감싸기. (= wrapAll메서드 = 랩올메서드)

1. wrapAll() 예제 - 매개변수가 HTML 요소인 경우
2. wrapAll() 정의
3. wrapAll() 구문
4. wrapAll() 예제 - 매개변수가 JS DOM 생성 구문인 경우

wrapAll() 예제 - 매개변수가 HTML 요소인 경우

 

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

<script>

$(document).ready(function(){

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

        $("p").wrapAll("<div></div>");

    });

});

</script>

 

<style>

div{background-color: yellow;}

div.s{background-color: pink;}

</style>

<p>홈짱닷컴 Homzzang.com</p>

<div class='s'>그누보드・서버관리 강의 </div>

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

<button>클릭</button>

결과보기 

wrapAll() 정의

 

선택요소 모두를 한번에 지정 요소로 감싸기.

 

---

 

1. 

위 예제 경우, p요소 전부를 하나의 div 요소로 한번에 감쌈.

그 결과, 맨 밑의 p가 위로 이동해 텍스트 순서가 바뀌게 됨.

 

2. 

wrap() 메서드 : 선택요소를 지정 요소로 감싸기. 

unwrap() 메서드 : 선택요소를 감싸는 부모 요소 제거.

 

wrapAll() 구문

 

$(selector).wrapAll(wrappingElement)

 

---

[매개변수]

 

wrappingElement

필수. 선택 요소를 감쌀 HTML 요소 지정. (가능값 리스트)

• HTML elements (요소)
• jQuery objects (객체)
• DOM elements (요소)

 

wrapAll() 예제 - 매개변수가 JS DOM 생성 구문인 경우

 

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

<script>

$(document).ready(function(){

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

        $("p").wrapAll(document.createElement("div"));

    });

});

</script>

<style>

div{background-color: yellow;}

</style>

<p>홈짱닷컴 Homzzang.com</p>

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

<button>클릭</button>

결과보기