clone vs detach

detach 와 clone에 대해서 알아보도록 하겠습니다.

detach

.detach( [selector ] )
detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다.

clone

.clone( [withDataAndEvents ][, deepWithDataAndEvents ] )
clone()은 선택한 dom 요소를 복제합니다.

withDataAndEvents 이벤트 핸들러와 데이터 요소와 함께 복사해야하는지 여부를 나타내는 값입니다. 기본값은 false입니다.

deepWithDataAndEvents 이벤트 처리기와 복제된 요소의 모든 자식 요소 데이터를 복사해야하는지 여부를 결정합니다. 기본값은 false입니다.

하나 더..

clone을 하지 않고 dom에 있는 요소 자체를 append하면 덮어쓰기가 됩니다.
(어찌보면 당연한건데 헤맸습니다.)

<div data-name="root">
  <div data-name="element"></div>
</div>

$('[data-name="root"]').append($('[data-name="element"]')); // 덮어쓰기
$('[data-name="root"]').append($('[data-name="element"]').clone()); // 복제한 요소가 append가 됨