[JQUERY] 어떻게 다른 요소로 요소를 이동하려면?

어떻게 다른 요소로 요소를 이동하려면?

해결법

1. ---

   1.이제까지 시도 일반 자바 스크립트 ... destination.appendChild (소스); ?

   이제까지 시도 일반 자바 스크립트 ... destination.appendChild (소스); ?

   의 onclick = 함수 () {destination.appendChild (소스); } DIV {마진 : .1em; } #destination {국경 : 고체 x 1 픽셀은 빨강; } #source {국경 : 고체 1 픽셀의 회색; }

   ### ***

2. ---

   2.당신은 (요소의 끝에 추가)을 appendTo 기능을 사용할 수 있습니다 :

   당신은 (요소의 끝에 추가)을 appendTo 기능을 사용할 수 있습니다 :

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

   또는 당신은 (요소의 시작 부분에 추가)를 prependTo 기능을 사용할 수 있습니다 :

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

   예:

   $ ( "# appendTo"). 클릭 (함수 () { $ ( "# moveMeIntoMain") appendTo ($ ( "# 메인")).; }); $ ( "# prependTo"). 클릭 (함수 () { $ ( "# moveMeIntoMain") prependTo ($ ( "# 메인")).; }); #main { 국경 : 2 픽셀 청색; 최소 높이 100 픽셀; } .moveMeIntoMain { 국경 : 1 픽셀의 빨간색으로; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   주

   주 에 저를 이동 <버튼 ID = "appendTo"> appendTo 메인 <버튼 ID = "prependTo"> prependTo 메인

3. ---

   3.내 솔루션 :

   내 솔루션 :

   움직임:

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

   부:

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

   .detach의 사용을 참고 (). 복사 할 때, 당신이 ID를 중복되지 않도록주의하십시오.

4. ---

   4.난 그냥 사용 :

   난 그냥 사용 :

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

   어떤 여기에서 잡았다.

5. ---

   5.무엇 자바 스크립트 솔루션에 대해?

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

   // 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);
   

   확인 해봐.

6. ---

   6.당신이 당신의 요소를 넣을 DIV 콘텐츠 내부를 가지고, 당신은 메인 컨텐츠 후 쇼 요소를 원하는 경우 :

   당신이 당신의 요소를 넣을 DIV 콘텐츠 내부를 가지고, 당신은 메인 컨텐츠 후 쇼 요소를 원하는 경우 :

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

   당신이 당신의 요소를 넣을 DIV 콘텐츠 내부를 가지고, 당신은 메인 컨텐츠 전에 요소를 표시 할 경우 :

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

   당신이 당신의 요소가 비어하거나 완전히 교체 할 넣을 DIV 경우 :

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

   당신은 위의 전 요소를 복제 할 경우 :

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

7. ---

   7.당신이 사용할 수있는:

   당신이 사용할 수있는:

   삽입하려면 후

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

   다른 요소 내부에 삽입하기 위해,

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

8. ---

   8.당신은 당신이 요소를 이동하는 방법에 대한 간단한 데모 및 자세한 내용을 원하는 경우,이 링크를 시도하십시오

   당신은 당신이 요소를 이동하는 방법에 대한 간단한 데모 및 자세한 내용을 원하는 경우,이 링크를 시도하십시오

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

   여기서 짧은 예이다 :

   요소 ABOVE 이동하려면 :

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

   요소 후에 이동하려면 :

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

   요소 내부에 이동하려면 해당 컨테이너 내부에 위의 모든 요소 :

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

   해당 컨테이너 내부의 모든 요소를 ​​한 후, 요소 내부에서 이동하려면 :

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

9. ---

   9.당신은 목적지에 소스를 이동하려면 다음 코드를 사용할 수 있습니다

   당신은 목적지에 소스를 이동하려면 다음 코드를 사용할 수 있습니다

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

   codepen 작업 시도

   이동 함수 () { jQuery를 ( "# 소스") .떼다() .appendTo ( '# 목적지'); } #출처{ 배경 색상 : 레드, 색상 : #FFFFFF; 표시 : 인라인 블록; 패딩 : 35px; } #목적지{ 배경 색상 : 블루; 색상 : #FFFFFF; 표시 : 인라인 블록; 패딩 : 50 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 나는 소스입니다

   나는 목적지입니다 <버튼의 onclick = "이동 ();"> 이동

10. ---

    10.나는 모든 이벤트 리스너를 포함하여 다른 하나 개의 컨테이너에서 컨텐츠를 이동해야하기 때문에 오래된 질문은 그러나 여기 있어요.

    나는 모든 이벤트 리스너를 포함하여 다른 하나 개의 컨테이너에서 컨텐츠를 이동해야하기 때문에 오래된 질문은 그러나 여기 있어요.

    jQuery를은 그러나에 appendChild가하는 표준 DOM 기능을 할 수있는 방법이 없습니다.

    //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

11. ---

    11.당신은 또한 시도 할 수 있습니다 :

    당신은 또한 시도 할 수 있습니다 :

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

    그러나이 것입니다 완전히 덮어 쓰기 아무것도 당신은 #destination에 있습니다.

12. ---

    12.당신이 DOM 요소의 톤을 가지고, 또는 당신이 MouseMove 이벤트 내부에 () 전 (후 사용) 또는해야하는 경우 나 .. insertafter 속성 사이 및 후 나에 insertbefore & 전에 거대한 메모리 누수 및 성능 차이를 발견, 브라우저 메모리는 아마도 증가합니다 다음 작업은 정말 느리게 실행됩니다.

    당신이 DOM 요소의 톤을 가지고, 또는 당신이 MouseMove 이벤트 내부에 () 전 (후 사용) 또는해야하는 경우 나 .. insertafter 속성 사이 및 후 나에 insertbefore & 전에 거대한 메모리 누수 및 성능 차이를 발견, 브라우저 메모리는 아마도 증가합니다 다음 작업은 정말 느리게 실행됩니다.

    난 그냥 경험 한이 솔루션은 대신 () 후 inserBefore 대신 전 ()와 insertafter 속성을 사용하는 것입니다.

13. ---

    13.당신은으로 appendChild () 메서드를 사용하여, 순수 자바 스크립트를 사용할 수 있습니다 ...

    당신은으로 appendChild () 메서드를 사용하여, 순수 자바 스크립트를 사용할 수 있습니다 ...

    당신이 일을 그렇게 할 수 있습니다, 이것은 내가에 appendChild ()를 사용하여, 당신을 위해 생성, 실행하고 당신의 사건에 대해 어떻게 작동하는지 볼 것입니다 :

    appendIt 함수 () { VAR 소스 document.getElementById를 ( "소스") =; document.getElementById를 ( "대상")에 appendChild (소스).; } #source { 색상 : 흰색; 배경 : 녹색; 패딩 : 4 픽셀 8px; } #destination { 색상 : 흰색; 배경 : 빨간색; 패딩 : 4 픽셀 8px; } 버튼 { 여백 - 상단 : 20 픽셀; }

    소스

    대상 <버튼의 onclick = "appendIt ()"> 요소를 이동

14. ---

    14.완성도를 위해서이 문서에 언급 된 다른 접근 방식 랩 () 또는 wrapAll ()가있다. 영업 이익의 질문은 아마도 (이에 의해 해결 될 수 있도록 즉,

    아직 존재하지 않는 가정, 다음과 같은 접근 방식은 처음부터 그런 랩퍼를 작성합니다 - 영업 래퍼 여부에 대해 명확하지 않았다 이미) 존재 여부 :

    완성도를 위해서이 문서에 언급 된 다른 접근 방식 랩 () 또는 wrapAll ()가있다. 영업 이익의 질문은 아마도 (이에 의해 해결 될 수 있도록 즉,

    아직 존재하지 않는 가정, 다음과 같은 접근 방식은 처음부터 그런 랩퍼를 작성합니다 - 영업 래퍼 여부에 대해 명확하지 않았다 이미) 존재 여부 :

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

    그것은 약속 소리. . 그러나,이 I $을하려고 하였다 ( "[ID = ^ 행]") wrapAll ( "

    ") 이런 여러 중첩 구조 :

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

    올바르게 그

    ... 및 ... 랩 왠지 <라벨> ... OUT 남긴다. 내가 대신 사용을 명시 적으로 $ ( "ROW1"). APPEND ( "#의 a_predefined_fieldset을") 결국 그래서. 그래서, YMMV.

15. ---

    15.Bekim Bacaj 응답의 더러운 크기 개선

    Bekim Bacaj 응답의 더러운 크기 개선

    DIV {국경 : 1 픽셀의 고체; 여백 : 5px}

    나 클릭

    ...

from https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element by cc-by-sa and MIT license