Vraag Hoe verplaats je een element naar een ander element?


Ik zou graag een DIV-element in een andere willen verplaatsen. Ik wil dit bijvoorbeeld verplaatsen (inclusief alle kinderen):

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

in dit:

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

zodat ik dit heb:

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

1427
2017-08-14 20:14


oorsprong


antwoorden:


Misschien wilt u de appendTo functie (die bijdraagt ​​aan het einde van het element):

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

Als alternatief kunt u de prependTo functie (die aan het begin van het element toevoegt):

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

Voorbeeld:

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



mijn oplossing:

MOVE:

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

KOPIËREN:

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

Let op het gebruik van .detach (). Let er tijdens het kopiëren op dat u geen ID's dupliceert.


779
2017-11-06 01:50



Ik heb zojuist gebruikt:

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

Waar ik uit greep hier.


104
2017-07-24 18:51



Als het div waar je je element wilt plaatsen heeft inhoud van binnen en je wilt dat het element wordt getoond na de belangrijkste inhoud:

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

Als het div waar je je element wilt plaatsen heeft inhoud van binnen, en je wilt het element laten zien voor de belangrijkste inhoud:

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

Als het div waar je je element wilt neerleggen is leeg, of je wilt vervangen het helemaal:

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

Als u een element wilt dupliceren vóór een van de bovenstaande:

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

81
2017-11-15 20:04



Hoe zit het met een JavaScript oplossing?

Verklaar een fragment:

var fragment = document.createDocumentFragment();

Voeg het gewenste element toe aan het fragment:

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

Voeg fragment toe aan gewenst element:

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

Bekijken.


65
2018-06-24 10:43



Je kunt gebruiken:

Invoegen na,

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

In een ander element invoegen,

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

27
2018-05-02 13:53



Ooit geprobeerd gewoon 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



U kunt de volgende code gebruiken om de bron naar de bestemming te verplaatsen

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

probeer te werken 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



Als je een snelle demo wilt en meer informatie over hoe je elementen verplaatst, probeer dan deze link:

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


Hier is een kort voorbeeld:

Om BOVEN een element te verplaatsen:

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

Nader een element verplaatsen:

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

Om binnen een element te bewegen, BOVEN ALLE elementen binnen die container:

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

Om binnen een element te bewegen, NA ALLE elementen in die container:

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

15
2017-12-24 04:06



Oude vraag maar hier gekomen omdat ik de inhoud van de ene container naar de andere moet verplaatsen inclusief alle evenement luisteraars.

jQuery heeft geen manier om het te doen, maar de standaard DOM-functie appendChild wel.

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

Met behulp van appendChild verwijdert u de .source en plaatst u deze in het doel, inclusief de gebeurtenislisteners: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild


10
2017-12-05 12:40



Je kunt ook proberen:

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

Maar dit zal alles wat je hebt volledig overschrijven #destination.


5
2017-08-23 21:16