JQuery day6

요소 포함 | 요소 복제

JQuery로 DOM 다루기

계속해서 JQuery로 DOM(문서객체모델)을 다루는 방법을 알아보자

[요소 포함]

종류	설명
wrap()	선택한 요소를 포함하는 새로운 요소를 추가
wrapAll()	선택한 모든 요소를 포함하는 새로운 요소를 추가
wrapInner()	선택한 요소에 포함되는 새로운 요소를 추가

요소 포함에 대한 예제를 확인해보자

<div class="content">첫번째 컨텐츠</div>
<div class="content">두번째 컨텐츠</div>
<button>div 요소 추가</button>

div{margin : 10px}
.content{border: 3px dotted red;}
.wrapper{border: 3px solid deepskyblue;}

스크립트 적용하지않았을 때)

이런 HTML, CSS코드가 있고 스크립트에 변화를 주어 요소가 어떻게 wrap되는지 확인하자.

1_wrap()

$(function(){
    $('button').on('click',function(){
        $('.content').wrap("<div class='wrapper'><div>"); // 각자 감싼다.
    });
});

2_wrapAll()

$(function(){
    $('button').on('click',function(){
        $('.content').wrapAll("<div class='wrapper'><div>"); // 한번에 감싼다.
    });
});

3_wrapInner()

$(function(){
    $('button').on('click',function(){
        $('.content').wrapInner("<div class='wrapper'><div>"); // 안쪽으로 감싼다.
    });
});

[요소 복사]

종류	설명
clone()	선택한 요소를 복사하여 새로운 요소를 생성한다. 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이기 때문에 append(), appendTo() 메소드와 같이 사용해야한다.

요소 추가 예제를 확인해보자

<ul id="list">
    <li id="firstItem">첫번째 아이템</li>
    <li>두번째 아이템</li>
    <li>세번째 아이템</li>
</ul>
<button>아이템 복사</button>

<script>
    $(function(){
    $('button').on('click', function(){
        $('#firstItem').clone().appendTo('#list');
    });
});
</script>

이벤트가 작동하지 않았을 때)

이벤트가 작동된 후)