jQuery를 사용한 요소 복제(clone)

jQuery의 clone() 메서드를 사용하면 선택한 요소를 복제할 수 있습니다. 이를 통해 동일한 내용을 가진 요소를 쉽게 생성하고 조작할 수 있습니다. 아래 예제를 통해 clone() 메서드를 사용하여 요소를 복제하는 방법을 알아보겠습니다.

예제 1: 문단 복제하여 추가하기

$(document).ready(function() {
    $("p").clone().appendTo("body");
});

이 예제는 페이지에서 모든 문단 요소를 선택하고, 각각의 요소를 복제하여 본문(body)에 추가합니다.

예제 2: 특정 클래스를 가진 문단 복제하여 스타일 변경하기

$(document).ready(function() {
    $(".highlight").clone().css("color", "red").appendTo("#container");
});

이 예제는 "highlight" 클래스를 가진 문단 요소를 선택하고, 각각의 요소를 복제하여 글꼴 색상을 빨간색으로 변경한 뒤 id가 "container"인 요소에 추가합니다.

예제 3: 복제된 요소에 이벤트 추가하기

$(document).ready(function() {
    $("button").click(function() {
        $("p").clone().appendTo("body");
    });
});

이 예제는 버튼이 클릭될 때마다 페이지에서 모든 문단 요소를 복제하여 본문(body)에 추가합니다.