wake-up-neo.com

Wie verschiebe ich ein Element in ein anderes Element?

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

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

das sehr gut finden:

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

so dass ich folgendes habe:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
javascriptjqueryhtml
1503
Mark Richman

Möglicherweise möchten Sie die Funktion appendTo verwenden (die zum Ende des Elements hinzugefügt wird):

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

Alternativ können Sie auch die Funktion prependTo verwenden (die den 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>

1651
Andrew Hare

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.

819
Alejandro Illecas

Ich habe gerade gebraucht:

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

Was ich aus hier gepackt habe.

106
kjc26ster

Wenn das div-Element, an dem Sie Ihr Element einfügen möchten, Inhalt enthält, und das Element after den Hauptinhalt anzeigen soll:

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

Wenn das div-Element, an dem Sie Ihr Element einfügen möchten, Inhalt enthält, und Sie das Element vorher des Hauptinhalts anzeigen möchten:

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

Wenn das div, an dem Sie Ihr Element ablegen möchten, leer ist, oder Sie möchten ersetzen ganz:

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

Wenn Sie ein Element vor einem der obigen Punkte duplizieren möchten:

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

Was ist mit einer JavaScript Lösung?

Deklarieren Sie ein Fragment:

var fragment = document.createDocumentFragment();

Hänge 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);

Probieren Sie es aus.

84
Ali Bassam

Sie können verwenden:

Einfügen nach,

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

Einfügen in ein anderes Element

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

Hast du jemals einfaches JavaScript ausprobiert ... 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>
22
Bekim Bacaj

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:

Um über ein Element zu verschieben:

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

Nach einem Element bewegen:

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

Um sich innerhalb eines Elements zu bewegen, werden in diesem Container ABOVE ALL-Elemente angezeigt:

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

Um sich innerhalb eines Elements zu bewegen, NACH ALLEN Elementen in diesem Container:

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

Sie können 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
Subodh Ghulaxe

Alte Frage, aber hierher gekommen, 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 standardmäßige DOM-Funktion von appendChild.

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

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

10
HMR

Sie können auch versuchen:

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

Dies wird jedoch alles überschreiben, was Sie in #destination haben.

5
Tamas

Ich habe einen großen Speicherleck & Leistungsunterschied zwischen insertAfter & after oder insertBefore & before bemerkt. Wenn Sie Tonnen von DOM-Elementen haben oder after () oder before () innerhalb eines MouseMove-Ereignisses verwenden müssen, erhöht sich der Browserspeicher wahrscheinlich Die nächsten Operationen laufen sehr langsam ab. Die Lösung, die ich gerade erlebt habe, ist die Verwendung von inserBefore anstelle von before () und insertAfter stattdessen after ().

4
spetsnaz

Der Vollständigkeit halber gibt es einen anderen Ansatz wrap() oder wrapAll() in diesem Artikel . Die Frage des OP könnte damit möglicherweise gelöst werden (d. H., Vorausgesetzt, der <div id="destination" /> existiert noch nicht, erstellt der folgende Ansatz einen solchen Wrapper von Grund auf - das OP war nicht klar, ob der Wrapper bereits existiert oder nicht):

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

Es klingt vielversprechend. Allerdings habe ich versucht, $("[id^=row]").wrapAll("<fieldset></fieldset>") für mehrere verschachtelte Strukturen wie folgt auszuführen:

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

Diese <div>...</div> und <input>...</input> werden korrekt umschlossen, ABER JEDESE VERLÄSST den <label>...</label>. Also habe ich stattdessen die explizite $("row1").append("#a_predefined_fieldset") verwendet. Also, YMMV.

0
RayLuo

Sie können reines JavaScript verwenden, indem Sie die appendChild()-Methode verwenden ...

Die appendChild () -Methode hängt einen Knoten als letztes Kind eines Knotens an.

Tipp: Wenn Sie einen neuen Absatz mit Text erstellen möchten, denken Sie an Erstellen Sie den Text als Textknoten, den Sie an den Absatz anhängen, und anschließend Hängen Sie den Absatz an das Dokument an.

Sie können diese Methode auch verwenden, um ein Element von einem Element nach .__ zu verschieben. Ein weiterer.

Tipp: Verwenden Sie die Methode insertBefore (), um einen neuen untergeordneten Knoten vor einem .__ einzufügen. angegebener, vorhandener, untergeordneter Knoten.

So können Sie das tun, um den Job zu erledigen. Dies ist, was ich für Sie erstellt habe, indem Sie appendChild() verwenden, um zu sehen, wie es für Ihren Fall funktioniert:

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
Alireza