Miten siirtää elementti toiseen elementtiin?

Haluaisin siirtää yhden DIV-elementin toisen elementin sisään. Haluan esimerkiksi siirtää tämän (mukaan lukien kaikki lapset):

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

tähän:

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

niin että minulla on tämä:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Muokattu kysymysT22 syyskuu 2014 в 3:45
Ohjelmointi
javascript html jquery
T44 elokuu 2009 в 8:14
89 näkymät
Ratkaisu

Voit käyttää appendTo -funktiota (joka lisää elementin loppuun):

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

Vaihtoehtoisesti voit käyttää funktiota `prependTo (joka lisää elementin alkuun):

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

Esimerkki:

$("#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
Muokattu vastausta T00 helmikuu 2018 в 12:32
Kommentit (15)

Käytin juuri:

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

jonka nappasin täältä.

Cᴏʀʏ
Muokattu vastausta T44 heinäkuu 2015 в 2:55
Kommentit (4)

Jos div, johon haluat laittaa elementin, sisältää sisältöä ja haluat elementin näkyvän pääsisällön jälkeen:

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

Jos div, johon haluat sijoittaa elementtisi, sisältää sisältöä ja haluat näyttää elementin ennen pääsisältöä:

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

Jos div, johon haluat sijoittaa elementtisi, on tyhjä tai haluat korvata sen kokonaan:

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

Jos haluat kopioida elementin ennen jotain edellä mainittua:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Muokattu vastausta T22 kesäkuu 2016 в 11:05
Kommentit (1)