jQuery 요소 감싸기

스크립트에서 요소를 제어하기 위해 요소를 특정 태그로 감싸야 하는 경우가 있는데, jQuery에서 이를 위한 API를 제공하고있다. 이번 포스팅에서 다룰 wrap(), wrapAll(), unwrap(), wrapInner() 는 모두 조건에 일치하는 요소들의 HTML 구조를 감싸는 메서드이다.

wrap()

• syntax wrap( wrappingElement )

• 선택한 요소를 원하는 태그로 감싼다

• 예제

<p>Hello world</p>

---

$( 'p' ).wrap( '<div></div>' );
// 결과 : <div><p>Hello world</p></div>

$( 'p' ).wrap( '<div id="ab" class="cd"></div>' );
// 결과 : <div id="ab" class="cd"><p>Hello world</p></div>

$( 'p' ).wrap( '<div><strong></strong></div>');
// 결과 : <div><strong><p>Hello world</p></strong></div>'

wrapAll()

• syntax wrapAll( wrappingElement )

• 선택한 요소를 모아서 하나의 태그로 둘러쌉니다.

• 예제

 <div class="container">
   <p>Lorem ipsum dolor.</p>
   <h3>Lorem ipsum dolor.</h3>
   <p>Lorem ipsum dolor.</p>
 </div>

---

$("p").wrapAll("<div></div>")
// 결과 :
 <div class="container">
  <div>
    <p>Lorem ipsum dolor.</p>
    <p>Lorem ipsum dolor.</p>
  </div>
  <h3>Lorem ipsum dolor.</h3>
</div>


 $(".container").contents().wrapAll('<div class="red"></div>');
 // 결과 :
 //contents()와 wrapAll()을 동시에 사용하여 하위 요소 모두를 새로운 태그로 감쌀 수 있다.
  <div class="container">
    <div class="red">
      <p>Lorem ipsum dolor.</p>
      <p>Lorem ipsum dolor.</p>
      <h3>Lorem ipsum dolor.</h3>
    </div>
  </div>

unwrap()

• syntax .unwrap()

• 선택한 요소의 상위 태그를 제거한다.

• 예제

<div>
  <h1>Hello World!</h1>
</div>

---

$( 'h1' ).unwrap()
// 결과 : <h1>Hello World!</h1>
//h1 요소의 상위 태그인 div 태그를 제거한다.

$( 'div' ).contents().unwrap();
// 결과 : <h1>Hello World!</h1>
//.contents()를 이용하여 자식 요소를 그대로 둔 채 현재 태그를 제거할 수 있다.

wrapInner()

• syntax .wrapInner("Selecotr")

• 선택한 요소의 자식 요소 모두를 특정 태그로 감싼다.

• 예제

<div class="items">item1</div>
<div class="items">item2</div>

---

$(".items").wrapInner("<a href='#'></a>")
// 결과 : 
<div class="items"><a href="#">item1</a></di>
<div class="items"><a href="#">item2</a></di>

---

[참고]
https://api.jquery.com/wrapinner/