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

1

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>

edited Jul 6, 2015 at 3:17

answered Jul 6, 2015 at 3:12

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Derek Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related