Question Comment déplacer un élément dans un autre élément?


Je voudrais déplacer un élément DIV dans un autre. Par exemple, je veux déplacer ceci (y compris tous les enfants):

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

dans ceci:

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

de sorte que j'ai ceci:

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

1427
2017-08-14 20:14


origine


Réponses:


Vous pouvez utiliser le appendTo fonction (qui ajoute à la fin de l'élément):

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

Vous pouvez également utiliser le prependTo fonction (qui ajoute au début de l'élément):

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

Exemple:

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



ma solution:

BOUGE TOI:

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

COPIE:

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

Notez l'utilisation de .detach (). Lors de la copie, veillez à ne pas dupliquer d'ID.


779
2017-11-06 01:50



Je viens d'utiliser:

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

Ce que j'ai attrapé de ici.


104
2017-07-24 18:51



Si la div où vous voulez mettre votre élément a du contenu à l'intérieur, et vous voulez que l'élément montre après le contenu principal:

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

Si la div où vous voulez mettre votre élément a du contenu à l'intérieur, et vous voulez montrer l'élément avant le contenu principal:

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

Si la div où vous voulez mettre votre élément est vide, ou vous voulez remplacer entièrement:

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

Si vous voulez dupliquer un élément avant l'un des éléments ci-dessus:

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

81
2017-11-15 20:04



Qu'en est-il un JavaScript Solution?

Déclarez un fragment:

var fragment = document.createDocumentFragment();

Ajouter l'élément souhaité au fragment:

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

Ajouter un fragment à l'élément désiré:

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

Vérifiez-le.


65
2018-06-24 10:43



Vous pouvez utiliser:

Pour insérer après,

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

Pour insérer à l'intérieur d'un autre élément,

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

27
2018-05-02 13:53



Jamais essayé JavaScript simple ... 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



Vous pouvez utiliser le code suivant pour déplacer la source vers la destination

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

essayer de travailler 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



Si vous voulez une démonstration rapide et plus de détails sur la façon dont vous déplacez des éléments, essayez ce lien:

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


Voici un petit exemple:

Pour déplacer AU-DESSUS un élément:

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

Pour déplacer AFTER un élément:

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

Pour se déplacer à l'intérieur d'un élément, AU-DESSUS de TOUS les éléments à l'intérieur de ce conteneur:

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

Pour se déplacer à l'intérieur d'un élément, APRÈS TOUS les éléments à l'intérieur de ce conteneur:

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

15
2017-12-24 04:06



Ancienne question mais je suis arrivé ici parce que je dois déplacer le contenu d'un conteneur à l'autre y compris tous les auditeurs d'événements.

jQuery n'a pas le moyen de le faire, mais la fonction DOM standard appendChild le fait.

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

L'utilisation de appendChild supprime le .source et le place dans la cible, y compris ses écouteurs d'événement: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild


10
2017-12-05 12:40