- wrap(wrappingElement) : 각요소를 매개변수로 감사줍니다.
- wrapAll(wrappingElement) : 모든 요소를 매개변수로 감싸줍니다.
- wraplnner(wrappingElement) : 각 요소를 매개변수로 감싸줍니다.
- unwrap(wrappingElement) : 요소를 감싸고 있는 부모엘리멘트를 제거합니다.
① wrap()
< wrap 과 wrapAll의 차이점 >
wrap() 메서드의 경우 select한 엘리먼트의 확장 집합을 개별적으로 wrapping을 한다.
wrapAll() 메서드의 경우 select한 엘리먼트의 확장 집합의 전체를 모아 한번에 wrapping을 한다.
< wrap 과 wrapinner() 의 차이점 >
wrap() 메서드의 경우 select한 엘리먼트의 확장 집합을 개별적으로 wrapping을 한다.
wrapinner() 메서드의 경우 선택한 확장요소의 안쪽을 감싸주는 차이점이 있습니다.
<style>
#wrap { border:1px solid red; }
</style>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2)');
el.wrap('<div id="wrap">'); // 아이디가 wrap인 div 태그를 생성하여 부모 엘리먼트로 만들어 줍니다.
});
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3 // $('#wrapper > ul > li:eq(2)');
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
[ 변경 후 ]
<ul>
<li>1</li>
<li>2</li>
<div id="wrap"><li>3
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li></div>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
② unwrap()
<script>
$(document).ready(function(){
$('#wrap > ul').unwrap();
});
</script>
[ 변경 전 ]
<ul>
<li>1</li>
<li>2</li>
<div id="wrap"><li>3 // ul태그 이하 자식들을 unwrap(); 으로 풀어주기...
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li></div>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
[ 변경 후 ]
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // div 아이디 wrap 으로 묶어준 태그를 풀어줌..
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
③ remove()
- remove() : 선택한 확장집합( div로 묶인 엘리먼트 )의 요소 중 매개변수와 일치하는 엘리먼트를 제거합니다.
매개변수를 생략 하면 선택한 확장집합 요소가 모두 제거됩니다.
empty() : 확장집합 요소의 컨텐츠를 제거합니다.
< remove()와 detach()와 메서드의 차이 >
remove()의 경우 엘리먼트를 삭제하면 바인딩된 이벤트나 저장된 데이터가 메모리에서 삭제 된다.
detach()의 경우 엘리먼트를 삭제하면 바인딩된 이벤트나 저장된 데이터가 남아 있어
해당 엘리먼트를 변수에 담았다가 다시 붙이면 이벤트와 데이터가 남아 있는것을 불 수 있다.
<style>
#wrap { border:1px solid red; }
</style>
<script>
$(document).ready(function(){
$('#list > li:eq(1)').remove();
});
</script>
3-1이 두개가 들어가 있네요. 표시된 부분을 지워주세요.
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list">
<li>3-1</li>
<li>3-1</li> // $('#list > li').eq(1)
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
[ 변경 후 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list">
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
④ empty()
<style>
#wrap { border:1px solid red; }
</style>
<script>
$(document).ready(function(){
var list = $('#list > li:eq(1)'); // list인 엘리먼트의 자식 엘리먼트 li에서 index가 1인 엘리먼트를 선택
list.empty(); // 콘텐츠 제거
list.text('3-1'); // 3-1 콘텐츠 추가
});
</script>
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list">
<li>3-0</li>
<li>3-11111111111</li> // $('#list > li:eq(1)');
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
[ 변경 후 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list">
<li>3-0</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
⑤ clone()
div로 묶인 확장집합을 복사합니다.
매개변수에 true 값을 넘기면 이벤트 핸들러와 데이터를 포함한 상태로 복사합니다.
<style>
#wrap { border:1px solid red; }
</style>
<script>
$(document).ready(function(){
var cloneEl = $('#list2 > li').clone();
$('#list').append(cloneEl);
});
</script>
[ 변경 전 ]
wrapper의 영역과 wrapper2의 영역을 비교하여 보세요!
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list"> // #list에 list2를 복사하여 추가해줌...
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="wrapper2">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list2"> // $('#list2 > li').clone();
<li>3-0</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
[ 변경 후 ]
<div id="wrapper2">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list2">
<li>3-0</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</body>
</html>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list">
<li>3-0</li><li>3-1</li><li>3-2</li><li>3-3</li><li>3-4</li><li>3-5</li></ul> // 추가된 모습
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="wrapper2">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul id="list2">
<li>3-0</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
