web-dev-qa-db-fra.com

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 souhaite 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>
javascriptjqueryhtml
1503
Mark Richman

Vous voudrez peut-être utiliser la fonction appendTo (qui ajoute à la fin de l'élément):

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

Vous pouvez également utiliser la fonction prependTo (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>

1651
Andrew Hare

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 les ID.

819
Alejandro Illecas

Je viens d'utiliser:

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

Ce que j'ai attrapé de ici .

106
kjc26ster

Si la div où vous voulez placer votre élément a un contenu à l'intérieur, et que vous voulez que l'élément affiche after le contenu principal:

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

Si la div où vous voulez placer votre élément a un contenu à l'intérieur et que vous voulez afficher l'élément before le contenu principal:

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

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

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

Si vous souhaitez dupliquer un élément avant l'une des précédentes:

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

Vous pouvez utiliser:

Pour insérer après,

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

Pour insérer dans un autre élément,

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

Si vous souhaitez une démonstration rapide et plus de détails sur la manière de déplacer des éléments, essayez ce lien:

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

Voici un court exemple:

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

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

Pour déplacer APRES un élément:

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

Pour vous déplacer à l'intérieur d'un élément, ABOVE TOUS les éléments à l'intérieur de ce conteneur:

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

Pour vous déplacer à l'intérieur d'un élément, APRES TOUS les éléments à l'intérieur de ce conteneur:

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

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

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

essayez 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
Subodh Ghulaxe

Ancienne question, mais arrivée ici parce que je dois déplacer le contenu d'un conteneur à un autre y compris tous les écouteurs d'événement.

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]);

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

10
HMR

Vous pouvez aussi essayer:

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

Mais cela écrasera complètement tout ce que vous avez dans #destination.

5
Tamas

J'ai remarqué une énorme perte de mémoire et des différences de performances entre insertAfter et after ou insertBefore et before. Si vous avez des tonnes d'éléments DOM ou si vous devez utiliser after () ou before () dans un événement MouseMove, la mémoire du navigateur les prochaines opérations seront très lentes. La solution que je viens de vivre consiste à utiliser inserBefore à la place before () et insertAfter à la place after ().

4
spetsnaz

Par souci d’exhaustivité, il existe une autre approche wrap() ou wrapAll() mentionnée dans cet article . Ainsi, la question du PO pourrait éventuellement être résolue (c'est-à-dire, en supposant que le <div id="destination" /> n'existe pas encore, l'approche suivante créera un tel wrapper à partir de zéro - le PO n'était pas clair sur le fait que le wrapper existe déjà ou non):

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

Cela semble prometteur. Cependant, lorsque j'essayais de faire $("[id^=row]").wrapAll("<fieldset></fieldset>") sur plusieurs structures imbriquées comme ceci:

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

Il encapsule correctement ces <div>...</div> et <input>...</input> MAIS QUELQUE FAÇON QUITTE LE <label>...</label>. J'ai donc fini par utiliser la fonction explicite $("row1").append("#a_predefined_fieldset"). Donc, YMMV.

0
RayLuo

Vous pouvez utiliser du JavaScript pur, en utilisant la méthode appendChild() ...

La méthode appendChild () ajoute un nœud en tant que dernier enfant d'un nœud.

Conseil: Si vous souhaitez créer un nouveau paragraphe avec du texte, rappelez-vous de créez le texte en tant que noeud de texte que vous ajoutez au paragraphe, puis annexer le paragraphe au document.

Vous pouvez également utiliser cette méthode pour déplacer un élément d'un élément à un autre.

Conseil: Utilisez la méthode insertBefore () pour insérer un nouveau nœud enfant avant un noeud enfant spécifié, existant.

Donc, vous pouvez faire cela pour faire le travail, voici ce que j'ai créé pour vous, en utilisant appendChild(), lancez et voyez comment cela fonctionne pour votre cas:

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>

0
Alireza