CODEWITHSUNDEEP
javascriptjquery
Hanfei Sun
Hanfei Sun

Reputation: 47051

Change the order of HTML element by jQuery?

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!

Upvotes: 3

Views: 8172

Answers (3)

Gayan Chinthaka
Gayan Chinthaka

Reputation: 569

Alternatively, You can use appendTo also in JQuery.

Ex :

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074138

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.

Upvotes: 9

WTK
WTK

Reputation: 16961

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

Upvotes: 2

Related Questions