요소의 복사 및 삭제
요소의 복사
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성할 수 있습니다.
1. .clone()
.clone() 메소드
.clone() 메소드는 선택한 요소를 복사하여 새로운 요소를 생성합니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함.
$("#firstItem").clone().appendTo("#list");
});
});
다음 예제는 앞서 살펴본 .appendTo() 메소드의 예제입니다.
예제
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
});
});
위의 예제에서 볼 수 있듯이 .clone() 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐입니다.
따라서 반드시 .append() 메소드나 .appendTo() 메소드와 같은 다른 메소드를 이용하여 요소를 추가해야 합니다.
.clone() 메소드를 사용하지 않고 .appendTo() 메소드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 점이 다릅니다.
요소를 복사해주는 메소드
| 메소드 | 설명 |
|---|---|
|
.clone() |
선택한 요소를 복사하여 새로운 요소를 생성함. |
요소의 대체
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있습니다.
1. .replaceAll()
2. .replaceWith()
.replaceAll() 메소드
.replaceAll() 메소드는 선택한 요소를 지정된 요소로 대체합니다.
이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있습니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
$("#firstItem").replaceAll(".item");
});
});
.replaceWith() 메소드
.replaceWith() 메소드는 선택한 요소를 지정된 요소로 대체합니다.
이 메소드는 인수로 HTML 코드 형식의 문자열이나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있습니다.
또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있습니다.
.replaceWith() 메소드의 동작은 .replaceAll() 메소드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
또한, .replaceWith() 메소드는 지정된 요소로 대체되어 제거된 기존 요소를 반환합니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
$(".item").replaceWith($("#firstItem"));
});
});
요소를 대체해주는 메소드
| 메소드 | 설명 |
|---|---|
|
.replaceAll() |
선택한 요소를 지정된 요소로 대체함. |
| .replaceWith() | 선택한 모든 요소를 지정된 요소로 대체함. |
요소의 삭제
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있습니다.
1. .remove()
2. .detach()
3. .empty()
4. .unwrap()
.remove() 메소드
.remove() 메소드는 선택한 요소를 DOM 트리에서 삭제합니다.
이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제됩니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
$(".content").remove(".first, .second");
});
});
.detach() 메소드
.detach() 메소드는 선택한 요소를 DOM 트리에서 삭제합니다.
이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지됩니다.
.detach() 메소드가 반환하는 제이쿼리 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있습니다.
예제
$(function() {
var data;
$("#detachBtn").on("click", function() {
data = $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
});
$("#restoreBtn").on("click", function() {
$("#container").append(data); // detach() 메소드로 삭제되었던 모든 요소를 다시 추가함.
});
});
.empty() 메소드
.empty() 메소드는 선택한 요소의 자식 요소를 모두 삭제합니다.
이때 .remove()나 .detach() 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않습니다.
예제
$(function() {
$("button").on("click", function() {
$("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
});
});
.unwrap() 메소드
.unwrap() 메소드는 선택한 요소의 부모 요소를 삭제합니다.
예제
$(function() {
$("button").on("click", function() {
$("span").unwrap(); // 모든 <span>요소의 부모 요소를 삭제함.
});
});
요소를 삭제해주는 메소드
| 메소드 | 설명 |
|---|---|
|
.remove() |
선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트도 같이 삭제됨) |
|
.detach() |
선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트는 유지됨) |
|
.empty() |
선택한 요소의 자식 요소를 모두 삭제함. |
| .unwrap() | 선택한 요소의 부모 요소를 삭제함. |
