Remove div and append after another div

Question

I would like to rearrange the order of my divs.

This is my structure here:

  <div class="span8 inner-left" style="clear:both;">
    <div class="span3" style="text-align:right;"></div>
  </div>
  <div id="moreread" class="span4 inner-left"></div>

This is what I would like my outcome to be:

   <div class="span8 inner-left" style="clear:both;">
     <div class="span3" style="text-align:right;"></div>
     <div id="moreread" class="span4 inner-left"></div>
  </div>

This does not work:

$(this).find('#moreread').after(".span3");

Probably duplicate with http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element — Felix, Oct 04 '12 at 22:09
http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library — john-jones, Oct 08 '14 at 11:10

score 7 · Accepted Answer · answered Oct 04 '12 at 22:10

7

You can use appendTo method:

$('#moreread').appendTo('.span8');

Please note that your markup is invalid, you should close your div tags.

answered Oct 04 '12 at 22:10

Ram

143,282
16
168
197

oops, that works but it adds it before '.span3' I need to add it after – user992731 Oct 04 '12 at 22:13

score 2 · Answer 2 · answered Oct 04 '12 at 22:12

2

You want to either .insertAfter('.span3'), or .appendTo('.span8')

The former will always put it directly after .span3, whereas the latter will always make it the last child of .span8 - in this case the two being equivalent.

answered Oct 04 '12 at 22:12

Alnitak

334,560
70
407
495

Gromer · Answer 3 · 2012-10-04T22:23:22.207

1

HTML:

<div class="span8 inner-left" style="clear:both;">
    A
    <div class="span3" style="text-align:right;">B</div>
</div>
<div id="moreread" class="span4 inner-left">C</div>

jQuery:

$('#moreread').insertAfter('.span3');

Fiddle: http://jsfiddle.net/gromer/WD976/1/

edited Oct 04 '12 at 22:23

answered Oct 04 '12 at 22:12

Gromer

9,861
4
34
55

Remove div and append after another div

3 Answers3