[jQuery] 요소 감싸기 - wrap(), wrapAll(), unwrap(), wrapInner() method

wrap() : 선택한 요소를 원하는 태그로 감싼다

문법 :

$('p').wrap('<div></div>');
$('p').wrap('<div id="ab" class="cd"></div>');
$('p').wrap('<div><strong></strong></div>');

예제 :

<div class="container">

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$( ".inner" ).wrap( "<div class='new'></div>" );

<div class="container">

<div class="new">

<div class="inner">Hello</div>

</div>

<div class="new">

<div class="inner">Goodbye</div>

</div>

</div>

==========================================================

.wrapAll() : 선택한 요소 모두를 새로운 태그로 감싼다

문법 :

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

$('p').wrap( '<div id="ab" class="cd"></div>');

$('p').wrap( '<div><strong></strong></div>');

예제 :

<p>Lorem ipsum dolor.</p>

<h3>Lorem ipsum dolor.</h3>

<p>Lorem ipsum dolor.</p>

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

<div>

<p>Lorem ipsum dolor.</p>

<p>Lorem ipsum dolor.</p>

</div>

<h3>Lorem ipsum dolor.</h3>

==========================================================

.unwrap() : 선택한 요소의 상위 태그를 제거
.contents()를 이용하여 자식 요소를 그대로 둔 채 현재 태그를 제거할 수 있습니다.

예제 :

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

$('h1').unwrap();

실행결과 : <h1>Hello World!</h1>

$('h1').contents().unwrap();

실행결과 : <div>Hello World!</div>

==========================================================

wrapInner()

예제 :

<div class="container">

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$(".inner").wrapInner("<div class='new'></div>");

<div class="container">

<div class="inner">

<div class="new">Hello</div>

</div>

<div class="inner">

<div class="new">Goodbye</div>

</div>

</div>

※ 출처 및 참고
linuxism :: jquery - 태그 감싸기 wrap(), wrapAll(), wrapInner() : http://linuxism.tistory.com/1496
CODING FACTORY - jQuery / Method / .wrap() : https://www.codingfactory.net/10214
CODING FACTORY - jQuery / Method / .unwrap() : https://www.codingfactory.net/10216
즐거움을 찾자 Find Fun!! - jQuery API 정복 - 요소 감싸기, wrap() : http://findfun.tistory.com/266?category=383258
jQuery API Documentation :: .wrap() : http://api.jquery.com/wrap/
jQuery API Documentation :: .wrapInner() : http://api.jquery.com/wrapinner/