Ako presunúť prvok do iného prvku?

Chcel by som presunúť jeden prvok DIV do druhého. Chcem napríklad presunúť tento prvok (vrátane všetkých podriadených prvkov):

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

do tohto:

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

takže mám toto:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Edited question 17 september 2014 в 3:45
Programovanie
javascript html jquery
14 august 2009 в 8:14
122 zobrazenia
Riešenie

Možno budete chcieť použiť funkciu appendTo (ktorá pridáva na koniec prvku):

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

Prípadne môžete použiť funkciu prependTo (ktorá pridáva na začiatok prvku):

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

Príklad:

$("#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
Edited answer 26 február 2018 в 12:32
Komentáre (15)

Práve som použil:

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

Ktorý som prevzal z tu.

Cᴏʀʏ
Edited answer 24 júl 2015 в 2:55
Komentáre (4)

Ak je v div, do ktorého chcete umiestniť svoj prvok, obsah a chcete, aby sa prvok zobrazil po hlavnom obsahu:

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

Ak div, do ktorého chcete umiestniť svoj prvok, má vo vnútri obsah a chcete, aby sa prvok zobrazil pred hlavným obsahom:

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

Ak je div, do ktorého chcete umiestniť svoj prvok, prázdny alebo ho chcete úplne nahradiť:

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

Ak chcete duplikovať prvok pred niektorým z vyššie uvedených:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Edited answer 22 jún 2016 в 11:05
Komentáre (1)