요소를 다른 요소로 이동하는 방법은 무엇인가요?

하나의 DIV 요소를 다른 요소 내부로 이동하고 싶습니다. 예를 들어 이 요소를 이동하고 싶습니다(모든 자식 포함):

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

를 이 안으로 옮기고 싶습니다:

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

이렇게 하면 됩니다:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
편집된 질문17일 9월 2014 в 3:45
프로그래밍
javascript html jquery
14일 8월 2009 в 8:14
97 파운드
질문에 대한 의견 (4)
해결책

요소 끝에 추가하는 appendTo 함수를 사용할 수 있습니다:

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

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

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

예시:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

appendTo main
prependTo main
Clonkex
편집된 답변26일 2월 2018 в 12:32
해설 (15)

내 해결책:

이동:

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

COPY:

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

주 사용 실드레이크 (). 복제 id 를 사용하지 않는 복사할 때 주의해야 합니다.

René Sackers
편집된 답변22일 10월 2015 в 9:29
해설 (8)

방금 사용했습니다:

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

여기]1에서 가져온 것입니다.

해설 (4)

요소를 넣으려는 'div'에 콘텐츠가 있고 그 요소가 기본 콘텐츠 뒤에 표시되기를 원하는 경우:

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

요소를 넣으려는 div에 콘텐츠가 있고 기본 콘텐츠 앞에 요소를 표시하려는 경우:

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

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

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

위의 방법보다 먼저 요소를 복제하려는 경우:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
편집된 답변22일 6월 2016 в 11:05
해설 (1)
  • 솔루션 JavaScript a * 어때?

선언을 하였다.

var = 도쿠망스크리스트로쿠망프레이크망 '조각' ();

덮어쓰기/추가 원하는 요소를 조각:

'프레이크망.a펜드차일드 (도쿠망스게테레멘트베이드 (& # 39, source& # 39;)),'

덮어쓰기/추가 조각 를 원하는 요소:

도쿠망스게테레멘트베이드 (& # 39, destination& # 39;) ',' 지아펜드차일드 (부분)

  • [체크아웃합니다.] [1] *
해설 (5)

사용할 수 있습니다.

이후 삽입하려면

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

다른 요소가 인사이드라면 삽입하려면

jQuery("#source").appendTo("#destination");
해설 (0)

일반 JavaScript 판매업체에서 했다. 데스티나션.a펜드차일드 (소스) ','?

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

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





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

끝 - &lt 스니핏 >;!

Bekim Bacaj
편집된 답변23일 7월 2017 в 1:44
해설 (2)

빠른 데모 및 방법에 대한 자세한 내용은 스케쳐내 요소, 이 링크를 시도하시겠습니까 이동할 수 있습니다.

http://html-tuts.com/move-div-in-another-div-with-jquery

  • 다음은 파선-짧은 example:*

위에서 움직일 수 있는 요소:

$('.whatToMove').insertBefore('.whereToMove');

이후 이동할 수 있는 요소:

$('.whatToMove').insertAfter('.whereToMove');

체론에서, 그 안의 모든 요소를 그들위에 이동합니까 인사이드라면 컨테이너입니다:

$('.whatToMove').prependTo('.whereToMove');

체론에서, 그 안의 모든 요소를 후 이동합니까 인사이드라면 컨테이너입니다:

$('.whatToMove').appendTo('.whereToMove');
해설 (0)

소스 타겟으로의 이동합니까 다음과 같은 코드를 사용할 수 있습니다.

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

apc® 시도하시겠습니까 고데펜

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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>

Move

끝 - &lt 스니핏 >;!

해설 (0)

그러나 이전 문제 등 때문에 여기에서 한 컨테이너입니다 잡을라는데 데릭쉐퍼드와 이동합니까 컨텐트입니다 다른 모든 이벤트 리스너에 .

39, DOM 표준 기능을 갖고 있지만 jquery doesn& appendChild 높여줍니까 길일 것이다.

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

39 의 대상 포함) 를 사용하여 절감뿐만 appendchild 이수르스 및 이벤트 리스너에 it& 넣습니다. https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

해설 (0)

할 수도 있습니다.

$("#destination").html($("#source"))

하지만 이렇게 하면 뭐든 덮어씁니다 '# 대상' 에서 완전히 있다.

해설 (1)

메모리 누수가 큰 건 물론 &amp. 성능 차이 ',' 제러태프터 &amp '후' '또는' 제이르트베포리 &amp. '전'. 세제곱밀리미터 사용해야 하는 경우에는 DOM 요소, 후 () '또는' 전 () ',' MouseMove event 브라우저 안에서 메모리 및 다음 작업은 실행하십시오 아마도 증가되지는 정말 느립니다.

39 를 사용하는 것이 아니라 그냥 I& 솔루션, ve () '와' 대신 '제러태프터 제르브포리 전에 경험한 후 ()'.

AI Perera
편집된 답변3일 10월 2019 в 10:29
해설 (3)

Appendchild () ',' 순수 JavaScript 사용하는 방법을 사용할 수 있습니다.

&gt. 말 그대로 '자식 노드를 첨부됩니다 appendChild () 메서드를 노드입니다. &gt. &gt. 팁: 새로 만들려면 반드시 단락, 텍스트로 스케쳐내 &gt. 텍스트 파일로 만들 수 있는 텍스트 노드입니다 덮어쓰기/추가 단락에 관심용 &gt. 단락 덮어쓰기/추가 문서에 대한. &gt. &gt. 이 방법을 사용하여 한 요소 요소에 이동할 수도 있습니다. &gt. 다른. &gt. &gt. 팁: 제이르트베포리 () 메서드를 사용하여 새 자식 노드를 삽입하려면 전에 &gt. 지정된, 기존, 하위 노드입니다.

이것이 내가 할 수 있는 작업을 할 수 있도록 만든 당신꺼에요 사용하여 appendChild () ',' 어때, 실행하십시오 작동하잖아 단축시킵니다 사례:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}
#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}
<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

Move Element

끝 - &lt 스니핏 >;!

Alireza
편집된 답변19일 1월 2019 в 1:01
해설 (0)

생각해서라도 좁히어 가 다른 외곽진입 '랩 ()' 또는 '완결성, 언급된 라이폴 ()' [이 문서] (https://www.elated.com/articles/jquery-adding-elements/ # 라이폴 라파이너 랩). 따라서 이 문제가 해결될 수 있다는 것, s # 39 OP& (즉, 가정하여, div id = '&lt &quot destination"; /&gt, '존재하지 않습니다, 다음 접근 방법은 만드시겠습니까 이런 래퍼 처음부터 - OP 는 래퍼 이미 방관하겠나 여부에 대한 아직 확실히 밝혀지지 않았다).

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

유망 들린다. 그러나 when I was trying to do '$ (" [id ^ = 행일] ") 드와라폴 (,,, &quot &lt fieldset&gt &lt /fieldset&gt ")' 에 다음과 같은 여러 네스트된 구조

<div id="row1">
    Name
    <input ...>
</div>

이러한 ',' 와 '올바른 둘러싸여집니다 &lt div&gt /div&gt .<;;;;;; 하지만 &lt input&gt .&lt /input&gt 찻입 아웃해야 label&gt /label&gt .<;;;'. '&lt 짐작이지만요. 그래서 됐지 list. 명시성 '$ (&quot row1";) 지아펜드 (# a_predefined_fieldset&quot ";)' 를 사용할 수 있습니다. 그래서, 이메프.

해설 (0)