Change the order of HTML element by jQuery?

Question

I'd love to change the order of HTML elements from:

<div id="d1">
    <div id="dd1"></div>
    <table id="t1"></table>
    <div id="be_top"></div>    
</div>

to:

<div id="d1">
    <div id="dd1"></div>
    <div id="be_top"></div>    
    <table id="t1"></table>
</div>

Does anyone have ideas about how to do this? Thanks!

T.J. Crowder · Accepted Answer · 2012-11-20 09:32:14Z

9

If you refer to the API documentation, you'll find the insertBefore function:

$("#be_top").insertBefore("#t1");

Live Example | Source

Or of course, you could do it the other way around with insertAfter:

$("#t1").insertAfter("#be_top");

Live Example | Source

An hour spent reading the API documentation beginning to end (and it really only takes that long) is hugely rewarding, saving you a lot of time over even just a brief period.

edited Nov 20, 2012 at 9:32

answered Nov 20, 2012 at 8:35

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

WTK · Accepted Answer · 2012-11-20 09:23:39Z

2

// select thing you want to move #be_top -> insert it before #t1
$("#be_top").insertBefore("#t1")

edited Nov 20, 2012 at 9:23

answered Nov 20, 2012 at 8:35

WTK

17.1k6 gold badges39 silver badges46 bronze badges

Comments

Gayan Chinthaka · Accepted Answer · 2022-04-08 03:23:51Z

0

Alternatively, You can use appendTo also in JQuery.

Ex :

var nav = $('#t1').clone(true);
$('#t1').remove();
nav.appendTo('#be_top');

answered Apr 8, 2022 at 3:23

Gayan Chinthaka

5896 silver badges7 bronze badges

Collectives™ on Stack Overflow

Change the order of HTML element by jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related