Aș dori pentru a muta un element DIV într-o altă. De exemplu, vreau să mă mut acest lucru (inclusiv copii):
<div id="source">
...
</div>
în:
<div id="destination">
...
</div>
așa că am asta:
<div id="destination">
<div id="source">
...
</div>
</div>
Poate doriți să utilizați appendTo
funcția (care se adaugă la sfârșitul element):
$("#source").appendTo("#destination");
Alternativ, ai putea folosi prependTo
funcția (care se adaugă la începutul element):
$("#source").prependTo("#destination");
Exemplu:
$("#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>
soluția mea:
MUTARE:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
COPIE:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Notă utilizarea .detașați(). Când copierea, fii atent că nu sunt web duplicarea Id-uri.
Dacă div
în cazul în care doriți să plasați elementul are un conținut în interiorul, și doriți ca elementul să arate după conținutul principal:
$("#destination").append($("#source"));
Dacă div
în cazul în care doriți să plasați elementul are un conținut în interiorul, și doriți să arate element înainte conținutul principal:
$("#destination").prepend($("#source"));
Dacă div
în cazul în care doriți pentru a pune elementul tău este gol, sau vrei să înlocuiți în întregime:
$("#element").html('<div id="source">...</div>');
Dacă doriți să duplicați un element înainte de orice de mai sus:
$("#destination").append($("#source").clone());
// etc.
Ce zici de un JavaScript soluție?
Declara un fragment:
var fragment = document.createDocumentFragment();
Adăugare element dorit să fragmentul:
fragmentul.appendChild(document.getElementById('sursa'));
Adăugați fragmentul dorit element:
document.getElementById('destinație').appendChild(fragment);
[A verifica it afară.][1]
Încercat vreodată simplu JavaScript... destinație.appendChild(sursa);` ?
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>
Daca vrei un demo rapid și mai multe detalii despre cum vă mutați elemente, încercați acest link:
http://html-tuts.com/move-div-in-another-div-with-jquery
Aici este un scurt exemplu:
Pentru a muta mai SUS un element:
$('.whatToMove').insertBefore('.whereToMove');
Pentru a muta DUPĂ un element:
$('.whatToMove').insertAfter('.whereToMove');
Pentru a muta în interiorul unui element, mai PRESUS de TOATE elemente în interiorul containerului:
$('.whatToMove').prependTo('.whereToMove');
Pentru a muta în interiorul unui element, DUPĂ TOATE elementele în interiorul containerului:
$('.whatToMove').appendTo('.whereToMove');
Puteți folosi următorul cod pentru a muta sursă la destinație
jQuery("#source")
.detach()
.appendTo('#destination');
încercați să lucrați 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>
Vechea întrebare, dar a ajuns aici pentru că am nevoie pentru a muta conținutul de la un container la altul inclusiv toate ascultătorii eveniment.
jQuery nu't au o modalitate de a face asta, dar standard DOM funcția appendChild face.
//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
Folosind appendChild elimină .sursă și pune-l într-țintă, inclusiv it's ascultătorii eveniment: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
Am observat uriașă scurgere de memorie & diferenta de performanta intre insertAfter
& după " sau "insertBefore
& "înainte" .. Dacă aveți de tone de elemente DOM, sau aveți nevoie pentru a utiliza după () " sau " înainte de()` în interiorul unui MouseMove event, browser-ul de memorie va crește, probabil, și operațiunile următoare va rula foarte încet.
Soluția pe care am'am experimentat este de a utiliza inserBefore în loc înainte de a()și insertAfter în loc
după()`.
Puteți folosi pur JavaScript, folosind appendChild()
metoda...
appendChild() metoda adaugă un nod ca ultimul copil al unui nod.
Sfat: Dacă doriți să creați un nou alineat, cu text, amintiți-vă pentru a creați textul ca un nod Text care le adăugați la punctul, atunci adăugați punctul de document.
de asemenea, puteți utiliza această metodă pentru a muta un element la un element la un alt.
Sfat: Utilizați insertBefore() metoda pentru a introduce un nou nod copil înainte de a o specificată, existente, nodul copil.
Astfel încât să puteți face asta pentru a face loc de muncă, acest lucru este ceea ce am creat pentru tine, folosind appendChild()
, a alerga și de a vedea cum funcționează pentru cazul dumneavoastră:
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>
Pentru motive de exhaustivitate, există o altă abordare folie () " sau " wrapAll()menționate la prezentul articol](https://www.elated.com/articles/jquery-adding-elements/#wrap-wrapAll-wrapInner). Deci, OP's cauză ar putea fi rezolvate de acest (care este, presupunând că
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
Sună promițător. Cu toate acestea, atunci când am fost încercarea de a face `$("[id^=rd]").wrapAll("
") pe mai multe imbricate structura astfel:<div id="row1">
<label>Name</label>
<input ...>
</div>
Corect împachetări cei <div>...</div> " și " <input>...</input>
DAR, CUMVA, FRUNZELE de <eticheta>...</eticheta>
. Așa am ajuns să folosesc explicit $("rând1").append("#a_predefined_fieldset")
în loc. Deci, YMMV.