Frage Wie verschiebt man ein Element in ein anderes Element?


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

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

das mögen:

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

damit ich das habe:

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

1427
2017-08-14 20:14


Ursprung


Antworten:


Vielleicht möchten Sie die appendTo Funktion (die zum Ende des Elements hinzufügt):

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

Alternativ könntest du das verwenden prependTo Funktion (die zum Anfang des Elements hinzufügt):

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

Beispiel:

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


1576
2017-08-14 20:16



meine Lösung:

BEWEGUNG:

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

KOPIEREN:

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

Beachten Sie die Verwendung von .detach (). Achten Sie beim Kopieren darauf, dass Sie keine IDs duplizieren.


779
2017-11-06 01:50



Ich habe gerade benutzt:

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

Womit ich gegriffen habe Hier.


104
2017-07-24 18:51



Wenn die div wo Sie möchten, dass Ihr Element Inhalt hat und Sie möchten, dass das Element angezeigt wird nach der Hauptinhalt:

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

Wenn die div wo Sie möchten, dass Ihr Element Inhalt hat und Sie das Element anzeigen möchten Vor der Hauptinhalt:

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

Wenn die div Wo du dein Element platzieren willst ist leer, oder du willst es 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.

81
2017-11-15 20:04



Was ist mit JavaScript Lösung?

Deklariere ein Fragment:

var fragment = document.createDocumentFragment();

Hängen Sie das gewünschte Element an das Fragment an:

fragment.appendChild(document.getElementById('source'));

Fragment an gewünschtes Element anhängen:

document.getElementById('destination').appendChild(fragment);

Hör zu.


65
2018-06-24 10:43



Sie können verwenden:

Nachher einfügen,

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

In ein anderes Element einfügen

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

27
2018-05-02 13:53



Jemals versucht, einfaches 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>


18
2017-11-02 08:49



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

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

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


16
2018-02-17 22:03



Wenn Sie eine schnelle Demo und weitere Details zum Verschieben von Elementen wünschen, versuchen Sie diesen Link:

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


Hier ist ein kurzes Beispiel:

So verschieben Sie OBEN ein Element:

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

So verschieben Sie sich NACH einem Element:

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

Um sich innerhalb eines Elements zu bewegen, ÜBERNEHMEN Sie alle Elemente in diesem Container:

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

Um innerhalb eines Elements nach allen Elementen in diesem Container zu verschieben:

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

15
2017-12-24 04:06



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

jQuery hat keine Möglichkeit, es 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]);

Wenn Sie appendChild verwenden, wird die Quelle entfernt und in das Ziel eingefügt, einschließlich der Ereignis-Listener: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild


10
2017-12-05 12:40