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

Question

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

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

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

dans ceci:

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

pour que j'ai ceci:

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

1455

html javascript jquery

demandé sur BoltClock 2009-08-15 00:14:45

13 réponses

score 1605 · Answer 1

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

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

vous pouvez aussi 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>

score 792 · Answer 2

ma solution:

MOVE:

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

COPY:

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

noter l'usage de .détacher.)( Lorsque vous copiez, veillez à ne pas dupliquer des pièces D'identité.

score 105 · Answer 3

je viens d'utiliser:

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

que j'ai saisi dans ici .

score 85 · Answer 4

si le div où vous voulez placer votre élément a du contenu à l'intérieur, et vous voulez que l'élément affiche après le contenu principal:

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

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

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

Si le div où vous voulez mettre votre élément est vide, ou si vous voulez à remplacer it 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.

score 68 · Answer 5

Qu'en est-il de la solution JavaScript ?

déclare un fragment:

var fragment = document.createDocumentFragment();

ajouter l'élément désiré au fragment:

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

ajouter fragment à l'élément désiré:

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

Check it out.

score 27 · Answer 6

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

score 19 · Answer 7

a déjà essayé le 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>

score 16 · Answer 8

vous pouvez utiliser le code suivant pour déplacer la source à destination

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

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>

score 15 · Answer 9

si vous voulez une démo 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 se déplacer au-dessus d'un élément:

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

pour se déplacer après 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');

score 10 · Answer 10

vieille question mais est arrivé 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 d'appendChild le fait.

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

utilisant appendChild enlève le .source et le place dans la cible, y compris ses auditeurs d'événements: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

score 5 · Answer 11

vous pouvez aussi essayer:

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

mais cela va complètement écraser tout ce que vous avez dans #destination .

score 4 · Answer 12

j'ai remarqué une énorme fuite de mémoire et la différence de performance entre insertAfter & after ou insertBefore & before .. Si vous avez des tonnes d'éléments DOM, ou si vous devez utiliser after() ou before() à l'intérieur d'un événement MouseMove, la mémoire du navigateur va probablement augmenter et les prochaines opérations seront vraiment lentes. La solution que je viens d'expérimenter est d'utiliser inserBefore à la place de() et insertAfter à la place de().

score 0 · Answer 13

pour des raisons d'exhaustivité, il y a une autre approche wrap() ou wrapAll() mentionnée dans cet article . Ainsi, la question de L'OP pourrait éventuellement être résolue par ceci (c'est - à-dire, en supposant que le <div id="destination" /> n'existe pas encore, l'approche suivante va créer une telle enveloppe à partir de zéro-L'OP n'était pas clair si l'enveloppe existe déjà ou non):

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

cela semble prometteur. Cependant, quand j'ai essayé de faire $("[id^=row]").wrapAll("<fieldset></fieldset>") sur la structure imbriquée multiple comme ceci:

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

il enroule correctement ces <div>...</div> et <input>...</input> mais en quelque sorte omet le <label>...</label> . Donc j'ai fini par utiliser le $("row1").append("#a_predefined_fieldset") explicite à la place. Alors, YMMV.

Las etiquetas más populares

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

13 réponses