Hvordan flytte et element inn i et annet element?

Jeg ønsker å flytte et DIV-element inni et annet. Jeg vil for eksempel flytte dette (inkludert alle underordnede elementer):

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

inn i dette:

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

slik at jeg får dette:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Redigerte spørsmål 17. september 2014 в 3:45
Programmering
javascript html jquery
14. august 2009 в 8:14
9 visninger
Løsning

Det kan være lurt å bruke funksjonen appendTo (som legger til på slutten av elementet):

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

Alternativt kan du bruke funksjonen `prependTo (som legger til i begynnelsen av elementet):

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

Eksempel:

$("#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
Redigert svar 26. februar 2018 в 12:32
Kommentarer (15)

Jeg brukte bare..:

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

som jeg hentet fra her.

Cᴏʀʏ
Redigert svar 24. juli 2015 в 2:55
Kommentarer (4)

Hvis div der du vil plassere elementet ditt har innhold, og du vil at elementet skal vises etter hovedinnholdet:

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

Hvis div der du vil plassere elementet ditt har innhold, og du vil at elementet skal vises før hovedinnholdet:

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

Hvis div der du vil plassere elementet ditt er tomt, eller du vil erstatte det helt:

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

Hvis du vil duplisere et element før noe av det ovennevnte:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Redigert svar 22. juni 2016 в 11:05
Kommentarer (1)