Wie kann man ein Element in ein anderes Element verschieben?

Question

Ich möchte ein DIV-Element in ein anderes verschieben. Zum Beispiel möchte ich dies verschieben (einschließlich aller Kinder):

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

in diese:

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

damit ich dies habe:

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

Answer 1

Wenn die div das Element, in das Sie Ihr Element einfügen möchten, hat einen Inhalt, und Sie möchten, dass das Element angezeigt wird nach den Hauptinhalt:

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

Wenn die div wo Sie Ihr Element mit Inhalt platzieren wollen, und Sie wollen das Element anzeigen avant den Hauptinhalt:

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

Wenn die div die Stelle, an der Sie Ihr Element platzieren wollen, leer ist, oder Sie wollen ersetzen. es vollständig:

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

---

Wenn Sie ein Element vor einem der oben genannten Elemente duplizieren möchten:

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

Answer 2

Sie können verwenden:

Zum Einfügen nach,

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

Zum Einfügen in ein anderes Element,

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

Answer 3

Sie können folgenden Code verwenden, um die Quelle zum Ziel zu verschieben

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

versuchen zu arbeiten 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>

Answer 4

Wenn Sie eine kurze Demo und mehr Details über das Verschieben von Elementen sehen möchten, klicken Sie auf diesen Link:

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

---

Hier ist ein kurzes Beispiel:

Um sich ÜBER ein Element zu bewegen:

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

Um sich NACH einem Element zu bewegen:

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

Um sich innerhalb eines Elements zu bewegen, müssen Sie ALLE Elemente innerhalb dieses Containers übergehen:

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

Um sich innerhalb eines Elements zu bewegen, NACH ALLEN Elementen innerhalb dieses Containers:

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

Answer 5

Alte Frage, aber ich bin hier, weil ich Inhalte von einem Container in einen anderen verschieben muss einschließlich aller Ereignis-Listener .

jQuery hat keine Möglichkeit, dies zu tun, aber die Standard-DOM-Funktion appendChild tut es.

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

Die Verwendung von appendChild entfernt die .source und platziert sie in target einschließlich ihrer Event-Listener: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild