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

Sie können es auch versuchen:

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

Dadurch wird jedoch alles überschrieben, was Sie in #destination .

Answer 2

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

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

Tipp: Wenn Sie einen neuen Absatz mit Text erstellen möchten, müssen Sie Sie den Text als Text-Knoten, den Sie an den Absatz anhängen, und dann fügen Sie den Absatz an das Dokument an.

Sie können diese Methode auch verwenden, um ein Element von einem Element zum anderen zu verschieben ein anderes zu verschieben.

Tipp: Verwenden Sie die Methode insertBefore(), um einen neuen Kindknoten vor einem bestehenden Kindknoten einzufügen.

Damit Sie das tun können, habe ich für Sie folgendes erstellt, mit appendChild() ausführen und sehen, wie es in Ihrem 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>

Answer 3

Ich habe ein großes Speicherleck und Leistungsunterschiede zwischen insertAfter & after o insertBefore & before .. Wenn Sie Unmengen von DOM-Elementen haben, oder Sie müssen after() o before() innerhalb einer MouseMove-Ereignis wird der Speicher des Browsers wahrscheinlich ansteigen und die nächsten Operationen werden sehr langsam ablaufen.

Die Lösung, die ich gerade erfahren habe, besteht darin, stattdessen inserBefore zu verwenden before() und stattdessen insertAfter after() .

Answer 4

Verbesserung der Schmutzgröße von Antwort von Bekim Bacaj

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

Answer 5

Der Vollständigkeit halber sei noch ein weiterer Ansatz erwähnt wrap() o wrapAll() erwähnt in dieser Artikel . Die Frage des Auftraggebers könnte also möglicherweise auf diese Weise gelöst werden (d. h. unter der Annahme, dass die <div id="destination" /> noch nicht existiert, wird der folgende Ansatz einen solchen Wrapper von Grund auf neu erstellen (der OP war sich nicht im Klaren darüber, ob der Wrapper bereits existiert oder nicht):

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

---

Das klingt vielversprechend. Als ich jedoch versuchte, die $("[id^=row]").wrapAll("<fieldset></fieldset>") auf mehrere verschachtelte Strukturen wie diese:

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

Diese werden korrekt umbrochen. <div>...</div> y <input>...</input> ABER LÄSST AUF JEDEN FALL DIE <label>...</label> . Also habe ich die explizite $("row1").append("#a_predefined_fieldset") stattdessen. Also, je nach dem.