Как да преместите елемент в друг елемент?

Искам да преместя един елемент DIV в друг. Например искам да преместя този елемент (включително всички деца):

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

в този:

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

така че да имам това:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Редактиран въпрос Направете септември 2014 в 3:45
Програмиране
javascript html jquery
Направете август 2009 в 8:14
226 изгледи
Решение

Може да искате да използвате функцията 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>

appendTo main
prependTo main
Clonkex
Редактиран отговор Направете февруари 2018 в 12:32
Коментари (15)

Просто използвах:

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

Което взех от тук.

Cᴏʀʏ
Редактиран отговор Направете юли 2015 в 2:55
Коментари (4)

Ако в div, където искате да поставите елемента, има съдържание и искате елементът да се показва след основното съдържание:

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

Ако div, в който искате да поставите елемента си, има вътрешно съдържание и искате елементът да се покаже преди основното съдържание:

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

Ако div, в който искате да поставите елемента си, е празен или искате да го замените изцяло:

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

Ако искате да дублирате даден елемент преди някое от горните действия:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Редактиран отговор Направете юни 2016 в 11:05
Коментари (1)