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



5 Answers

내 솔루션 :

움직임:

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

부:

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

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

Question

하나의 DIV 요소를 다른 요소 안으로 옮기고 싶습니다. 예를 들어, 저는 이것을 (모든 아이들을 포함하여) 옮기고 싶습니다 :

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

이것으로 :

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

그래서 나는 이것을 가지고있다.

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



이전 질문은 모든 이벤트 리스너를 포함하여 한 컨테이너에서 다른 컨테이너로 컨텐츠를 이동해야하기 때문에 여기에 있습니다.

jQuery는 그것을 할 수있는 방법이 없지만 표준 DOM 함수 appendChild는 그렇게한다.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

appendChild를 사용하면 .source가 제거되어 이벤트 리스너를 포함하여 대상에 배치됩니다. https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild




당신이 사용할 수있는:

삽입 후,

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

다른 요소 안에 삽입하려면,

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



div 요소를 넣으 div 가 내용을 내부에 가지고 있고 주 내용 뒤에 요소를 표시하려면 다음과 같이하십시오.

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

div 요소를 넣으 div 안에 내용이 있고 주 내용 앞에 요소를 표시하려면 다음을 수행하십시오.

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

div 요소를 넣으 div 가 비어 있거나 완전히 대체 하려는 경우 :

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

위의 요소 중 하나보다 먼저 요소를 복제하려면 다음을 수행하십시오.

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



insertAfter와 after 또는 insertBefore & before 사이에 엄청난 메모리 누출 및 성능 차이가 있음을 발견했습니다. DOM 요소가 많거나 MouseMove 이벤트 내에서 after () 또는 before ()를 사용해야하는 경우 브라우저 메모리가 증가하고 다음 작업은 정말 느리게 실행됩니다. 필자가 경험 한 해결책은 before () 및 insertAfter () 대신 inserBefore를 사용하는 것입니다.




적 보통 자바 스크립트를 시도 ... 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>






Related