왜 요소 복사·대체·삭제를 알아야 할까?

SPA · 동적 리스트·UI 리팩터링을 하다 보면 DOM 노드를 복사하고, 다른 노드로 교체하고, 깔끔히 제거해야 하는 순간이 자주 옵니다. 제이쿼리의 전용 메소드를 알면 직접 DOM API를 쓰는 것보다 코드가 짧아지고 실수도 줄어듭니다.

---

1️⃣ 요소 복사: .clone()

메소드	역할	특징
.clone()	선택 요소를 복사해 새 노드 생성	이벤트·데이터도 복사하려면 .clone(true, true)

// <li id="firstItem">One</li> 복사해 #list 맨 뒤에 추가
$("#firstItem").clone().appendTo("#list");

팁: .clone()만 호출하면 메모리에만 복사본이 남습니다. 반드시 .append()·.appendTo() 등으로 DOM에 삽입하세요.

---

2️⃣ 요소 대체: .replaceWith() vs .replaceAll()

메소드	작동 대상	설명
.replaceWith()	타깃을 새 요소로 교체	$(".item").replaceWith($("#firstItem"))
.replaceAll()	소스를 타깃 위치에 삽입	$("#firstItem").replaceAll(".item")

// .replaceWith(): .item 모두를 #firstItem으로 교체
$(".item").replaceWith($("#firstItem"));

// .replaceAll(): #firstItem을 .item 자리마다 복사·삽입
$("#firstItem").clone().replaceAll(".item");

두 메소드는 효과가 동일하지만 “누가 호출자냐”가 다릅니다. 상황에 따라 가독성이 더 좋은 쪽을 선택하세요.

---

3️⃣ 요소 삭제: .remove()·.detach()·.empty()·.unwrap()

메소드	삭제 범위	이벤트·데이터 보존	사용 예
.remove()	본인	❌ 삭제	$(".banner").remove()
.detach()	본인	✅ 보존	const $spare = $("#box").detach();
.empty()	자식만	–	$("#list").empty()
.unwrap()	부모 삭제	–	$("span.highlight").unwrap()

// 1) 완전 삭제
$(".content").remove(".first, .second");

// 2) DOM 분리 후 재삽입
const $detached = $(".content").detach();
$("#container").append($detached);

// 3) 자식만 비우기
$("#container").empty();

// 4) 래퍼 삭제
$("span").unwrap();

detach 사용 시기: 애니메이션처럼 잠시 숨겼다가 다시 보여야 할 때 핸들러·데이터 손실 없이 복원 가능합니다.

---

4️⃣ 실전 퍼포먼스 & 관리 팁

• 여러 개 복사가 필요할 땐 템플릿 문자열에 HTML을 누적 → 한 번만 .append().
• 이벤트 포함 복사는 .clone(true, true)로 핸들러·데이터까지 안전 복제.
• 삭제 후 메모리 누수를 막기 위해 전역 변수나 타임아웃에 남은 참조를 같이 정리하세요.
• .unwrap()은 스타일·레이아웃이 한꺼번에 바뀔 수 있어 세심한 CSS 검토 필요.

---

질문 정리

질문	답변
detach와 remove 차이는?	.remove()는 DOM·데이터·이벤트 모두 삭제, .detach()는 DOM만 제거해 복원 가능
replaceAll 성능 이슈 없나요?	내부적으로 clone → insert → remove 순서로 처리해 DOM 재계산 최소화—성능 차이는 미미합니다.
clone 시 중복 ID 문제는?	복사본이 같은 ID를 갖게 되면 유효성·CSS 충돌이 나므로 복사 후 removeAttr("id")로 정리하세요.
empty로 텍스트 노드도 지워지나요?	.empty()는 모든 자식 노드(텍스트 포함)를 제거합니다.
unwrap을 여러 중첩 래퍼에 쓰려면?	.parentsUntil()로 범위를 제한 후 .unwrap()을 체이닝하면 다단계 래퍼 제거가 가능합니다.