선택한 요소를 문서에서 제거하고 저장하는 방법 - .detach()

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

.detach()

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

 

기본형

.detach( [ selector ] )

예를 들어

var abc = $( 'h1' ).detach();

는 h1 요소를 문서에서 제거하고 변수 abc에 저장합니다.

 

예제

Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다.

<h1>Lorem</h1>
<h2 class="a">Ipsum</h2>
<h3 class="b">Dolor</h3>
<button id="cut">Cut</button> <button id="paste">Paste</button>
jQuery( document ).ready( function() {
  var Detach;
  $( '#cut' ).click( function() {
    Detach = $( '.b' ).detach();
  });
  $( '#paste' ).click( function() {
    $( '.a' ).before( Detach );
  });
});

You may like these posts

  • .slice() .slice()는 일치하는 요소의 일부분만 선택합니다.   기본형 .slice( start [, end ] ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' )…
  • .slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.   기본형 .slideToggle( [ duration ] [, easing ] [, complete ] )   d…
  • .text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.   기본형 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var abc = $( 'h1' )…
  • .slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.   기본형 .slideUp( [duration ] [, easing ] [, complete ] )   duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기…
  • .slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.   기본형 .slideDown( [ duration ] [, easing ] [, complete ] )   duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1…
  • .scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다.   기본형 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 …

Post a Comment