Jak przenieść element do innego elementu?

Chciałbym przenieść jeden element DIV do innego. Na przykład chcę to przenieść (w tym wszystkie dzieci):

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

zaangażowany w to:

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

więc mam to:

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

Czy kiedykolwiek próbowałeś zwykłego JavaScript ... 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>

Możesz użyć appendTofunkcji (która dodaje się do końca elementu):

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

Alternatywnie możesz użyć prependTofunkcji (która dodaje się do początku elementu):

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

Przykład:

$("#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>

moje rozwiązanie:

RUSZAJ SIĘ:

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

KOPIUJ:

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

Zwróć uwagę na użycie .detach (). Podczas kopiowania uważaj, aby nie powielać identyfikatorów.

Właśnie użyłem:

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

Który stąd złapałem .

Co z rozwiązaniem JavaScript ?

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

Sprawdź to.

Jeśli w divmiejscu, w którym chcesz umieścić element, znajduje się treść, a chcesz, aby element wyświetlał się po głównej zawartości:

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

Jeśli w divmiejscu, w którym chcesz umieścić element, znajduje się zawartość, a chcesz pokazać element przed główną treścią:

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

Jeśli miejsce, w divktórym chcesz umieścić element, jest puste lub chcesz go całkowicie zastąpić :

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

Jeśli chcesz powielić element przed którymkolwiek z powyższych:

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

Możesz użyć:

Aby wstawić po,

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

Aby wstawić do innego elementu,

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

Jeśli chcesz mieć szybkie demo i więcej szczegółów na temat przenoszenia elementów, wypróbuj ten link:

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

Oto krótki przykład:

Aby przenieść POWYŻEJ elementu:

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

Aby przejść PO elemencie:

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

Aby poruszać się w elemencie, POWYŻEJ WSZYSTKIE elementy w tym kontenerze:

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

Aby poruszać się wewnątrz elementu, PO WSZYSTKICH elementach w tym kontenerze:

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

Możesz użyć następującego kodu, aby przenieść źródło do miejsca docelowego

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

spróbuj działać 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>

Stare pytanie, ale dotarłem tutaj, ponieważ muszę przenosić zawartość z jednego kontenera do drugiego, w tym wszystkich detektorów zdarzeń .

jQuery nie ma na to sposobu, ale robi to standardowa funkcja DOM appendChild.

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

Użycie appendChild usuwa .source i umieszcza go w celu, w tym w detektorach zdarzeń: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Możesz także spróbować:

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

Ale to całkowicie zastąpi wszystko, co masz #destination.

Zauważyłem ogromny przeciek pamięci i różnicę wydajności między insertAfteri afterlub insertBeforei before. Jeśli masz mnóstwo elementów DOM lub potrzebujesz użyć after()lub before()wewnątrz zdarzenia MouseMove , pamięć przeglądarki prawdopodobnie wzrośnie, a kolejne operacje będą przebiegać naprawdę wolno.

Rozwiązaniem, którego właśnie doświadczyłem, jest użycie insertBefore zamiast before()i insertAfter zamiast after().

Możesz użyć czystego JavaScript, używając appendChild()metody ...

Metoda appendChild () dołącza węzeł jako ostatnie dziecko węzła.

Wskazówka: Jeśli chcesz utworzyć nowy akapit z tekstem, pamiętaj o utworzeniu tekstu jako węzła tekstowego, który dołączasz do akapitu, a następnie dołącz akapit do dokumentu.

Możesz także użyć tej metody, aby przenieść element z jednego elementu do drugiego.

Wskazówka: Użyj metody insertBefore (), aby wstawić nowy węzeł potomny przed określonym, istniejącym węzłem potomnym.

Aby to zrobić, możesz to zrobić, oto, co dla ciebie stworzyłem, używając appendChild(), uruchamiając i sprawdzając, jak to działa w twoim przypadku:

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>

Dla kompletności istnieje inne podejście wrap()lub wrapAll()wspomniane w tym artykule . Pytanie OP może więc zostać rozwiązane w ten sposób (tzn. Zakładając, że <div id="destination" />jeszcze nie istnieje, poniższe podejście utworzy takie opakowanie od zera - PO nie było jasne, czy opakowanie już istnieje, czy nie):

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

Brzmi obiecująco. Jednak gdy próbowałem zrobić $("[id^=row]").wrapAll("<fieldset></fieldset>")na wielu zagnieżdżonych strukturach, takich jak to:

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

To właściwie zawija te <div>...</div>i <input>...</input>ale jakoś pominięto <label>...</label>. Więc $("row1").append("#a_predefined_fieldset")zamiast tego użyłem jawnego . Więc YMMV.