JQuery wrap API 예제 알아보기

JQuery wrap에 관련 된 모든 메소드를 알아보자

---

안녕하세요. 오늘은 JQuery의 중요한 기능 중 하나인 wrap을 알아보려 합니다.

JQuery의 wrap 메소드는 HTML 요소를 감싸는 데 사용되는 기능입니다. 이 메소드를 사용하면 선택한 요소들을 새로운 컨테이너 요소로 감쌀 수 있습니다.

---

wrap() 예제

---

wrap 메소드는 선택한 요소들을 새로운 요소로 감싸는 기능을 합니다. 이 메소드를 사용하면 선택한 요소들을 새로운 요소로 감쌀 수 있습니다.

<div class="container">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
  <p>세 번째 문장</p>
</div>

만약, 이 HTML 소스에서 p 태그들을 각각 div 태그로 감싸고 싶다면

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

이렇게 하면 선택한 p 태그들이 각각 div 태그로 감싸지게 됩니다.

 

 

---

wrapAll() 예제

---

 

wrapAll 메소드는 선택한 요소들을 하나의 새로운 요소로 감싸는 기능을 합니다.

<div class="container">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
  <p>세 번째 문장</p>
</div>
<div class="container">
  <p>네 번째 문장</p>
  <p>다섯 번째 문장</p>
  <p>여섯 번째 문장</p>
</div>

만약, 이 코드에서 모든 p 태그들을 하나의 div 태그로 감싸고 싶다면

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

이렇게 하면 모든 p 태그들이 하나의 div 태그로 감싸지게 됩니다.

 

 

---

wrapInner() 예제

---

wrapInner 메소드는 선택한 요소들의 내용을 새로운 요소로 감싸는 기능을 합니다.

<div class="container">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
  <p>세 번째 문장</p>
</div>

만약, 이 코드에서 모든 p 태그들의 내용을 span 태그로 감싸고 싶다면

$("p").wrapInner("<span></span>");

이렇게 하면 모든 p 태그들의 내용이 span 태그로 감싸지게 됩니다.

 

 

---

unwrap() 예제

---

unwrap 메소드는 선택한 요소들의 부모 요소를 삭제하는 기능을 합니다.

<div class="container">
  <div class="wrapper">
    <p>첫 번째 문장</p>
    <p>두 번째 문장</p>
    <p>세 번째 문장</p>
  </div>
</div>

만약, 이 코드에서 wrapper 클래스를 삭제하고 싶다면

$(".wrapper").unwrap();

이렇게 하면 wrapper 클래스가 삭제되고, p 태그들은 container 클래스 안에 직접적으로 위치하게 됩니다.

 

 

---

wrapInnerAll() 예제

---

wrapInnerAll 메소드는 선택한 요소들의 내용을 하나의 새로운 요소로 감싸는 기능을 합니다.

<div class="container">
  <div class="wrapper">
    <p>첫 번째 문장</p>
    <p>두 번째 문장</p>
    <p>세 번째 문장</p>
  </div>
  <div class="wrapper">
    <p>네 번째 문장</p>
    <p>다섯 번째 문장</p>
    <p>여섯 번째 문장</p>
  </div>
</div>

만약, 이 코드에서 모든 wrapper 클래스 안에 있는 p 태그들의 내용을 span 태그로 감싸고 싶다면

$(".wrapper").wrapInner("<span></span>");

이렇게 하면 모든 wrapper 클래스 안에 있는 p 태그들의 내용이 span 태그로 감싸지게 됩니다.

 

 

---

wrapAllInner() 예제

---

wrapAllInner 메소드는 선택한 요소들의 내용을 하나의 새로운 요소로 감싸는 기능을 합니다.

<div class="wrapper">
    <p>첫 번째 문장</p>
    <p>두 번째 문장</p>
    <p>세 번째 문장</p>
  </div>
  <div class="wrapper">
    <p>네 번째 문장</p>
    <p>다섯 번째 문장</p>
    <p>여섯 번째 문장</p>
  </div>
</div>

만약, 이 코드에서 모든 wrapper 클래스 안에 있는 p 태그들의 내용을 하나의 span 태그로 감싸고 싶다면

$(".wrapper").wrapAllInner("<span></span>");

이렇게 하면 모든 wrapper 클래스 안에 있는 p 태그들의 내용이 하나의 span 태그로 감싸지게 됩니다.

 

 

---

마무리

---

이상으로 JQuery wrap 메소드와 관련된 모든 메소드에 대해 소개해 보았습니다. 이러한 메소드들을 효과적으로 활용하면, 웹 페이지의 레이아웃을 보다 효과적으로 구성할 수 있습니다.

저도 실제 개발에서도 자주 사용하는 API인데요, 특히 동적으로 요소를 움직이거나 수정하여 분기처리해야 할 때 많이 사용하는 아주 유용한 API입니다.

여러분들도 숙지하셔서 꼭 알맞은 소스를 만들어보세요.^^