Искам да преместя един елемент DIV в друг. Например искам да преместя този елемент (включително всички деца):
<div id="source">
...
</div>
в този:
<div id="destination">
...
</div>
така че да имам това:
<div id="destination">
<div id="source">
...
</div>
</div>
Може да искате да използвате функцията appendTo
(която добавя към края на елемента):
$("#source").appendTo("#destination");
Като алтернатива можете да използвате функцията prependTo
(която добавя към началото на елемента):
$("#source").prependTo("#destination");
Пример:
$("#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>
Ако в div
, където искате да поставите елемента, има съдържание и искате елементът да се показва след основното съдържание:
$("#destination").append($("#source"));
Ако div
, в който искате да поставите елемента си, има вътрешно съдържание и искате елементът да се покаже преди основното съдържание:
$("#destination").prepend($("#source"));
Ако div
, в който искате да поставите елемента си, е празен или искате да го замените изцяло:
$("#element").html('<div id="source">...</div>');
Ако искате да дублирате даден елемент преди някое от горните действия:
$("#destination").append($("#source").clone());
// etc.