How to move element to another element in Jquery

Question

Hi I would like to move this element into another element. Sample

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

into this

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

so I have something like this

<div id="destination"> <div id="me-first"></div> <div id="source">...</div> <div id="last-here"></div> </div>

Here is my code

jQuery(document).ready(function (){ jQuery("#destination") .prependTo("#source"); });

My problem is it will only transfer in the first place before me-first div. How do i put it in the middle of the me-first div and last-here div? Thanks

Here is the wrong placement after I ran my code.

<div id="destination"> <div id="source">...</div> <div id="me-first"></div> <div id="last-here"></div> </div>

Derek · Accepted Answer · 2015-07-06 03:15:25Z

1

Use .after():

jQuery('#me-first').after(jQuery('#source'));

This will place #source after #me-first in the DOM.

answered Jul 6, 2015 at 3:15

Derek

4,7513 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-07-06 03:17:39Z

All of your elements have ID attributes, so use id selector(prefix #) to select them, not class selector(prefix .) which is used to select element by class name

jQuery(function($) { $("#source").prependTo("#destination"); });

div { padding: 5px; margin-bottom: 5px; border: 1px solid black; min-height: 10px; } #destination { border-color: red; } #me-first { border-color: green; } #last-here { border-color: blue; } #source { background-color: lightgrey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="destination"> <div id="me-first"> <div id="source"> ... </div> <div id="last-here"> </div> </div> </div>

prependTo() won't put it between the elements he outlined in his DOM description.

Collectives™ on Stack Overflow

How to move element to another element in Jquery

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related