Je voudrais déplacer un élément DIV à l'intérieur d'un autre. Par exemple, je veux déplacer cet élément (y compris tous les enfants) :
<div id="source">
...
</div>
dans celui-ci :
<div id="destination">
...
</div>
de sorte que j'obtienne ceci :
<div id="destination">
<div id="source">
...
</div>
</div>
Vous pouvez utiliser la fonction [appendTo
][1] (qui ajoute à la fin de l'élément) :
$("#source").appendTo("#destination");
Vous pouvez aussi utiliser la fonction [prependTo
][2] (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>
[1] : http://api.jquery.com/appendTo/ [2] : http://api.jquery.com/prependTo/
J'ai juste utilisé :
$('#source').prependTo('#destination');
Que j'ai récupéré de [ici][1].
[1] : http://www.elated.com/articles/jquery-removing-replacing-moving-elements/
Si la div
où vous voulez placer votre élément a du contenu à l'intérieur, et que vous voulez que l'élément s'affiche après le contenu principal :
$("#destination").append($("#source"));
Si la `div' dans laquelle vous voulez placer votre élément contient du contenu et que vous voulez que l'élément s'affiche avant le contenu principal :
$("#destination").prepend($("#source"));
Si la `div' dans laquelle vous voulez placer votre élément est vide, ou si vous voulez la 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.