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

1688

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

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

이것으로 :

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

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

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

javascript jquery html

— 마크 리치 먼
소스

21

$ (target_element) .append (to_be_inserted_element)를 사용하십시오.

— Mohammad Areeb Siddiqui 2016 년

2

또는 : 일반 자바 스크립트를 사용하는 destination.appendChild (source)

— luke

CSS를 사용하여 이것을 달성 할 수 있습니까? 가능합니까?

— RajKumar Samala

6

@RajKumarSamala CSS는 HTML의 구조를 변경할 수 없으며 프리젠 테이션 만 변경할 수 있습니다.

— Mark Richman

38

일반 자바 스크립트를 사용해 본 적이 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>

스 니펫 확장

— 베킴 바카
소스

* 누군가 가 게시물을 향상시키려는 시도에서 키워드 로 데모 스 니펫 의 글로벌 이벤트 onclick 를 접두사로 만들었습니다 var.

— Bekim Bacaj

6

사람들이 여전히 jQuery가 JavaScript와 같다고 생각하는 것은 놀라운 일입니다. 2017 년에는 더 이상 jQuery가 필요하지 않습니다.

— nkkollaw

2

2017 년에는 jquery가 필요하지 않지만 때로는 모든 단일 프로젝트에서 반복해서 반복하는 작업에 더 가볍고 유사한 것을 사용하는 데 도움이됩니다. 나는 크로스 브라우저 친화적 인 방식으로 document.ready, window.load 이벤트를 듣는 쉬운 방법으로 현금을 사용합니다. 쉬워요.

— eballeste

1

이것을 2020 년이 된 지금은 정답으로 바

— 꾸었습니다.

1

사람들이 여전히 jQuery가 JavaScript와 같다고 생각하는 것은 놀라운 일입니다. 실제로 2020 년에는 더 이상 jQuery가 필요하지 않습니다.

— ii iml0sto1

1793

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>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

스 니펫 확장

— 앤드류 헤어
소스

23

대신 요소의 다른 사본을 만들 수 있으므로 jQuery mobile에서 제대로 작동하지 않을 수 있다는 경고입니다.

— Jordan Reiter

32

appenTo가 사본을 만들거나 실제로 전체 div를 대상으로 이동합니까? (복사하는 경우 ID로 div를 호출하면 오류가 발생합니다)

50

여기, 제거 교체 및 jQuery를에 요소 이동에 대한 훌륭한 기사입니다 elated.com/articles/jquery-removing-replacing-moving-elements

— xhh

42

appendTo에 대한 jQuery 문서는 요소가 이동 되었음을 나타냅니다 . it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com

— John K

15

당신은 그것을 움직이지 않고 단지 추가하고 있습니다. 아래 답변은 적절한 이동을 수행합니다.

— Aaron

913

내 해결책 :

움직임:

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

부:

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

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

— 알레한드로 일 카스
소스

86

가장 좋은 답변입니다. 수락 된 답변은 사본을 생성하고 질문과 같은 요소를 이동시키지 않습니다.

— paulscode

97

죄송하지만 Andrew Hare의 답변은 정확합니다. 분리가 필요하지 않습니다. 위의 Pixic의 JSFiddle에서 사용해보십시오. 분리 호출을 제거하면 복사가 아닌 이동과 똑같이 작동합니다. 여기에 단지 하나의 변화와 포크의 : jsfiddle.net/D46y5 으로이 API에 설명 : api.jquery.com/appendTo : "요소가이 방법은 다른 곳 DOM에서 하나의 위치에 삽입 선택한 경우에는 이동합니다 복제되지 않은 대상으로 삽입되고 삽입 된 요소로 구성된 새 세트가 리턴됩니다. "

— John-Not A Number

8

@ John-NotANumber가 맞습니다-여기서 detach ()가 필요하지 않습니다. 허용되는 답변이 가장 좋으며 실제로 문서를 올바르게 읽으면됩니다.

— LeonardChallis

11

appendTo 문서에는 또한 "대상 요소가 두 개 이상인 경우 첫 번째 요소 이후에 각 대상에 대해 삽입 된 요소의 복제 된 사본이 작성되며 새 세트 (원래 요소와 복제본)가 리턴됩니다."라고 말합니다. 따라서 일반적인 경우이 솔루션은 사본을 만들 수도 있습니다!

— Vincent Pazeller

큰! 또는 이것을 사용하여 어디로 옮길 것인지 더 구체적으로 지정할 수 있습니다.$('#nodeToMove').insertAfter('#insertAfterThisElement');

— Victor Augusto

108

방금 사용했습니다 :

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

내가 여기서 잡은 것 .

— kjc26ster
소스

7

음, 분리는 요소를 붙잡고 나중에 다시 삽입하려고 할 때 유용하지만 예제에서는 즉시 다시 삽입합니다.

— Tim Büthe

1

나는 당신이 무엇을 얻고 있는지 잘 모르겠지만 샘플 코드를 제공 할 수 있습니까?

— kjc26ster

1

prependTo는 요소를 원래 위치에서 분리하고 새로운 요소에 삽입한다는 것을 의미합니다. 반면에 분리 기능은 선택한 요소를 분리하기 만하며 나중에 변수를 DOM에 삽입하기 위해 변수에 저장할 수 있습니다. 문제는 분리 통화가 필요 없다는 것입니다. 그것을 제거하면 동일한 효과를 얻을 수 있습니다.

— Tim Büthe

1

1 년 후 (원본과 동일하게) 다른 답변이 추가되어 800 개 이상의

— 투표

96

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

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

확인 해봐.

— 알리 바삼
소스

8

단순히 document.getElementById ( 'destination'). appendChild (document.getElementById ( 'source')) 대신 createDocumentFragment를 사용하는 이유는 무엇입니까?

— Gunar Gessner

6

@ GunarC.Gessner는 소스 객체를 대상 객체에 추가하기 전에 수정해야한다고 가정하면 가장 좋은 방법은 가상 객체이며 DOM 트리의 일부가 아닌 조각을 사용하는 것입니다. 소스 오브젝트는 추가하기 전에 초기 위치에서 수정하지 않고 원래 위치 (현재 조각 내부)에서 전환 된 경우입니다.

— Ali Bassam

5

JavaScript 순수 솔루션을 제공하는 것과 관련하여 추가하고 싶습니다. jQuery를 항상 사용되는 가정해서는 안

— 알렉산더 Fradiani을

1

질문 : 자식 노드를 추가 할 때 연결된 이벤트가 손실됩니까?

— jimasun

1

내 자신의 질문에 대한 대답은 예입니다. 첨부 된 이벤트를 유지합니다.

— jimasun

95

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

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

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

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

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

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

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

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

— sbaaaang
소스

나는 모든 볼드체를 조금 읽기가 어렵다는 것을 알지만 이것이 가장 유익한 답변이므로 내 의견을 얻습니다.

— Michael Scheper 2016 년

32

당신이 사용할 수있는:

이후에 삽입하려면

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

다른 요소 안에 삽입하려면

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

— 수 브라마 얌
소스

20

빠른 데모와 요소 이동 방법에 대한 자세한 내용을 보려면 다음 링크를 시도하십시오.

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

다음은 간단한 예입니다.

요소 위로 이동하려면 :

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

요소 다음에 이동하려면

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

요소 내부로 이동하려면 해당 컨테이너 내부의 모든 요소를 살펴보십시오.

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

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

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

— 단
소스

19

다음 코드를 사용하여 소스를 대상으로 옮길 수 있습니다

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

코드 펜 작업 해보기

코드 스 니펫 표시

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>

스 니펫 확장

— Subodh Ghulaxe
소스

11

오래된 질문이지만 모든 이벤트 리스너를 포함하여 한 컨테이너에서 다른 컨테이너로 컨텐츠를 이동해야하기 때문에 여기에 도착했습니다 .

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

— HMR
소스

6

시도해 볼 수도 있습니다 :

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

그러나 이것은 당신이 가진 모든 것을 완전히 덮어 쓸 것입니다 #destination.

— 타마스
소스

2

그리고 이동 한 요소에서 이벤트 리스너를 중단하십시오.

— Igor Pomaranskiy

4

insertAfter& after와 insertBefore& 사이의 엄청난 메모리 누수 및 성능 차이를 발견했습니다 before. DOM 요소가 많거나 MouseMove 이벤트 를 사용 after()하거나 사용해야 before()하는 경우 브라우저 메모리가 증가하고 다음 작업이 실제로 느리게 실행됩니다.

방금 경험 한 솔루션은 대신 inserBefore를 사용 before()하고 insertAfter를 사용하는 것 after()입니다.

— 스페츠나츠
소스

이것은 JavaScript 엔진 구현에 따른 문제처럼 들립니다. 어떤 브라우저 버전과 JS 엔진이 있습니까?

— Mark Richman

1

Chrome 버전 36.0.1985.125에 있고 jQuery v1.11.1을 사용하고 있습니다. mousemove 이벤트에 함수를 바인딩하여 간단한 DIV를 마우스가있는 요소의 위 또는 아래로 이동합니다. 따라서이 이벤트 및 기능은 커서를 드래그하는 동안 실행됩니다. after ()와 before ()에서 메모리 누수가 발생하면 커서를 30 초 이상 움직이면 insertAfter & insertBefore를 대신 사용하면 사라집니다.

— 스페츠나츠

1

나는 구글에 버그를 열었다.

— Mark Richman

2

appendChild()메소드를 사용하여 순수한 JavaScript를 사용할 수 있습니다 ...

appendChild () 메소드는 노드를 노드의 마지막 자식으로 추가합니다.

팁 : 텍스트를 사용하여 새 단락을 만들려면 단락에 추가 할 텍스트 노드로 텍스트를 만든 다음 단락을 문서에 추가하십시오.

이 방법을 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다.

팁 : insertBefore () 메소드를 사용하여 지정된 기존 하위 노드 앞에 새 하위 노드를 삽입하십시오.

그래서 당신은 일을하기 위해 그렇게 할 수 있습니다. 이것은 내가 당신을 위해 만든 것입니다 appendChild().

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>

<button onclick="appendIt()">Move Element</button>

스 니펫 확장

— 알리레자
소스

0

완성도를 위해서, 또 다른 접근 방식이 wrap()나 wrapAll()에 언급 된 이 문서 . 따라서 OP의 질문은 이것에 의해 해결 될 수 있습니다 (즉, <div id="destination" />아직 존재하지 않는다고 가정하면 다음 접근법은 처음부터 그러한 래퍼를 생성합니다-OP는 래퍼가 이미 존재하는지 여부에 대해 명확하지 않았습니다) :

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

유망한 소리. 그러나 $("[id^=row]").wrapAll("<fieldset></fieldset>")다음과 같이 여러 개의 중첩 구조 를 수행하려고했을 때 :

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

그것은 정확하게 그 래핑 <div>...</div>및 <input>...</input>하지만 어떻게 든 OUT LEAVES <label>...</label>. 그래서 나는 $("row1").append("#a_predefined_fieldset")대신 명시 적을 사용했습니다. YMMV입니다.

— 레이 루오
소스