[javascript] 요소를 다른 요소로 옮기는 방법?

JAVASCRIPT / 글쓴이

한 DIV 요소를 다른 DIV 요소로 옮기고 싶습니다. 예를 들어, 이것을 옮기고 싶습니다 (모든 자식 포함).

<div id="source">
...
</div>

이것으로 :

<div id="destination">
...
</div>

그래서 나는 이것을 가지고 있습니다 :

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

답변

일반 자바 스크립트를 사용해 본 적이 destination.appendChild(source);있습니까?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; }
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

스 니펫 확장

답변

appendTo함수 를 사용하고 싶을 수도 있습니다 (요소 끝에 추가됨).

$("#source").appendTo("#destination");

또는 prependTo함수를 사용할 수 있습니다 (요소의 시작 부분에 추가됨).

$("#source").prependTo("#destination");

예:

코드 스 니펫 표시

답변

내 해결책 :

움직임:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

부:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

.detach ()의 사용법에 유의하십시오. 복사 할 때 ID를 복제하지 않도록주의하십시오.

답변

방금 사용했습니다 :

$('#source').prependTo('#destination');

내가 여기서 잡은 것 .

답변

무엇에 대한 자바 스크립트 솔루션?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

확인 해봐.

답변

경우 div당신이 당신의 요소를 넣어하려는 콘텐츠 내부를 가지고, 당신은 쇼 요소 원하는 이후 의 주요 내용 :

  $("#destination").append($("#source"));

경우 div당신이 당신의 요소를 넣어하려는 콘텐츠 내부를 가지고, 당신은 요소 보여주고 싶은 전에 주요 내용 :

$("#destination").prepend($("#source"));

경우 div당신이 당신의 요소를 넣어 원하는 위치가 비어 있습니다, 또는 당신은 할 대체 를 완전히 :

$("#element").html('<div id="source">...</div>');

위의 요소 전에 요소를 복제하려는 경우 :

$("#destination").append($("#source").clone());
// etc.

답변

당신이 사용할 수있는:

이후에 삽입하려면

jQuery("#source").insertAfter("#destination");

다른 요소 안에 삽입하려면

jQuery("#source").appendTo("#destination");