[Jquery] clone() - 요소 복사하는 방법

   

 

이번 글에는 요소를 복사하는 방법에 대하여 알아보도록 하겠습니다.

 

clone() 메소드

- 선택한 요소를 복사하여 새로운 요소를 생성이 가능합니다.

 

예제를 통하여 자세히 살펴보도록 하겠습니다.

아래 코드는 <button>을 클릭하면 'firstItem' 이라는 id를 가진 <li> 태그를 복사하고 추가하는 예제입니다.

<script>
    $(function() {
        $("button").on("click", function() {
            $("#firstItem").clone().append("#list");
        })
    })
</script>
<h1>.clone() 메소드</h1>
<ul id="list">
    <li id="firstItem">첫 번째 아이템이에요!</li>
    <li>두 번째 아이템이에요!</li>
    <li>세 번째 아이템이에요!</li>
</ul>
<button>아이템 복사</button>

 

출력 결과

 

정상적으로 화면에 나온 것을 확인할 수 있습니다.