javascript 태그 만들기 - 어떤 요소를 다른 요소로 옮기는 방법?





6 Answers

내 솔루션 :

움직임:

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

부:

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

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

css div 순서

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

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

이것으로 :

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

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

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



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

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

div 요소를 넣으 div 안에 내용이 있고 기본 내용 앞에 요소를 표시하려면 다음과 같이하십시오.

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

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

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

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

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



당신이 사용할 수있는:

삽입 후,

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

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

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



다음 코드를 사용하여 소스를 대상으로 이동할 수 있습니다.

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

codepen 작업을 시도 codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>




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

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




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




Related