Ik wil het ene DIV-element naar het andere verplaatsen. Ik wil dit bijvoorbeeld verplaatsen (inclusief alle kinderen):
<div id="source">
...
</div>
hierin:
<div id="destination">
...
</div>
zodat ik dit heb:
<div id="destination">
<div id="source">
...
</div>
</div>
Antwoord 1, autoriteit 100%
Ooit gewoon JavaScript geprobeerd… 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>Antwoord 2, autoriteit 97%
Misschien wilt u de functie appendTogebruiken (die bijdraagt aan het einde van het element):
$("#source").appendTo("#destination");
Als alternatief kunt u de functie prependTogebruiken (die bijdraagt aan de begin van het element):
$("#source").prependTo("#destination");
Voorbeeld:
Antwoord 3, autoriteit 99%
mijn oplossing:
VERPLAATSEN:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
KOPIE:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Let op het gebruik van .detach(). Let er bij het kopiëren op dat u geen ID’s dupliceert.
Antwoord 4, autoriteit 98%
Hoe zit het met een JavaScript-oplossing?
// 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);
Antwoord 5, autoriteit 117%
Ik heb zojuist gebruikt:
$('#source').prependTo('#destination');
Die ik hierheb gehaald.
Antwoord 6, autoriteit 105%
Als de divwaarin u uw element wilt plaatsen inhoud bevat en u wilt dat het element nade hoofdinhoud toont:
$("#destination").append($("#source"));
Als de divwaarin u uw element wilt plaatsen inhoud bevat en u het element vóórde hoofdinhoud wilt tonen:
$("#destination").prepend($("#source"));
Als de divwaar u uw element wilt plaatsen leeg is, of u wilt het vervangenvolledig:
$("#element").html('<div id="source">...</div>');
Als je een element wilt dupliceren vóór een van de bovenstaande:
$("#destination").append($("#source").clone());
// etc.
Antwoord 7, autoriteit 40%
U kunt gebruiken:
Om daarna in te voegen,
jQuery("#source").insertAfter("#destination");
Om in een ander element in te voegen,
jQuery("#source").appendTo("#destination");
Antwoord 8, autoriteit 23%
Als je een snelle demo en meer details wilt over hoe je elementen verplaatst, probeer dan deze link:
http://html-tuts.com/move-div-in-another -div-met-jquery
Hier is een kort voorbeeld:
BOVEN een element verplaatsen:
$('.whatToMove').insertBefore('.whereToMove');
Om NA een element te verplaatsen:
$('.whatToMove').insertAfter('.whereToMove');
Om in een element te bewegen, boven alle elementen in die container:
$('.whatToMove').prependTo('.whereToMove');
Om in een element te bewegen, na alle elementen in die container:
$('.whatToMove').appendTo('.whereToMove');
Antwoord 9, Autoriteit 23%
U kunt de volgende code gebruiken om de bron naar de bestemming
te verplaatsen
jQuery("#source")
.detach()
.appendTo('#destination');
Probeer werken codepen
Antwoord 10, Autoriteit 14%
Oude vraag, maar kwam hier omdat ik inhoud van de ene container naar een andere inclusief alle evenementenluisteraars moet verplaatsen .
JQuery heeft geen manier om het te doen, maar standaard DOM-functie Bijlage doet.
//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
Met behulp van bijlichaam wordt de .Bron verwijderd en plaatst deze in doel, waaronder het gebeurtenis-luisteraars: https://developer.mozilla.org/en-us/docs/web/api/node.appdchild
Antwoord 11, Autoriteit 10%
U kunt het ook proberen:
$("#destination").html($("#source"))
Maar dit zal alles wat je hebt in #destinationvolledig overschrijven.
Antwoord 12, autoriteit 6%
Ik merkte een enorm geheugenlek op & prestatieverschil tussen insertAfter& afterof insertBefore& before.. Als je tonnen DOM-elementen hebt, of je moet after()of before()gebruiken in een MouseMove gebeurtenis, zal het browsergeheugen waarschijnlijk toenemen en zullen de volgende bewerkingen erg traag verlopen.
De oplossing die ik zojuist heb ervaren is om inserBefore te gebruiken in plaats before()en insertAfter in plaats daarvan after().
Antwoord 13, autoriteit 5%
Je kunt puur JavaScript gebruiken, met de methode appendChild()…
De methode appendChild() voegt een knooppunt toe als het laatste kind van een knooppunt.
Tip: als u een nieuwe alinea met tekst wilt maken, vergeet dan niet om:
maak de tekst als een tekstknooppunt dat u aan de alinea toevoegt, dan
voeg de alinea toe aan het document.U kunt deze methode ook gebruiken om een element van het ene element naar
een andere.Tip: gebruik de methode insertBefore() om een nieuwe onderliggende node in te voegen vóór a
gespecificeerde, bestaande, onderliggende node.
Dus je kunt dat doen om het werk te doen, dit is wat ik voor je heb gemaakt, met behulp van appendChild(), voer het uit en kijk hoe het voor jouw geval werkt:
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>Antwoord 14, autoriteit 3%
vuile grootteverbetering van Bekim Bacaj antwoord
div { border: 1px solid ; margin: 5px }<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>Antwoord 15, autoriteit 2%
Voor de volledigheid wordt er een andere benadering wrap()of wrapAll()genoemd in dit artikel. Dus de vraag van de OP kan hiermee mogelijk worden opgelost (dat wil zeggen, ervan uitgaande dat de <div id="destination" />nog niet bestaat, zal de volgende benadering zo’n wrapper helemaal opnieuw creëren – de OP was niet duidelijk of de wrapper al bestaat of niet):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
Het klinkt veelbelovend. Toen ik echter $("[id^=row]").wrapAll("<fieldset></fieldset>")probeerde uit te voeren op meerdere geneste structuren, zoals deze:
<div id="row1">
<label>Name</label>
<input ...>
</div>
Het wikkelt die <div>...</div>en <input>...</input>correct in, MAAR BLIJFT OP EEN of andere manier UIT de <label>...</label>. Dus uiteindelijk gebruikte ik de expliciete $("row1").append("#a_predefined_fieldset"). Dus, YMMV.