jQuery 입문 | 요소의 조작 | 요소의 복사 .clone()

jQuery는 요소나 콘텐츠를 손쉽게 복사할 수 있는 메소드를 제공한다.

요소의 복사

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 HTML 요소나 콘텐츠를 생성할 수 있다.

.clone() 메소드

.clone() 메소드는 선택한 요소를 복사하여 새로운 HTML 요소를 생성한다.

아래와 같은 요소가 있을 때,

<p id="hello">안녕하세요.</p>
<p id="devkuma">dekuma입니다.</p>

아래와 같이 hello 요소를 복사해서, .appendTo() 메소드를 사용하여 붙여넣기 한다.

$("#hello").clone().appendTo("#devkuma");

코드 실행

위의 예제를 실행해 보면 알 수 있듯이 .clone() 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이다.
따라서 반드시 .append() 메소드나 .appendTo() 메소드와 같은 다른 메소드를 이용하여 요소를 추가해야 한다.
.clone() 메소드를 사용하지 않고 .appendTo() 메소드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 점이 다르다.

.appendTo() 메소드는 선택한 요소를 ‘해당 요소의 마지막’에 추가해 주는 메소드이다.