How do I move an HTML element in jQuery?

Question

My HTML structure is like this:

<div id="parent">
   <div id="1">Some content</div>
   <div id="2">Some content</div>
</div>

I want to move the element id="2" to place before id="1" so its will be like this:

<div id="parent">
   <div id="2">Some content</div>
   <div id="1">Some content</div>
</div>

How do I do something like that in jQuery?

@rahul - they're invalid in HTML4, be clear about that given the changes lately ;) — Nick Craver
– Nick Craver, Commented Dec 13, 2010 at 11:27
@rahul: ID is just only for example :), the real script of course not that. — GusDeCooL
– GusDeCooL, Commented Dec 13, 2010 at 12:41

Tyler Rick · Accepted Answer · 2012-05-16 02:28:57Z

91

You can use .insertBefore(), like this:

$("#2").insertBefore("#1");

Or, .prependTo(), like this:

$("#2").prependTo("#parent");

...or the reverse using #1 and .insertAfter() and .appendTo()...or several other ways actually, it just depends what you're actually after, the above 2 methods should be about the shortest possible though, given 2 IDs.

I'm assuming this is just an example, remember to use IDs that don't start with a number in an actual HTML4 page, they're invalid and cause several issues.

edited May 16, 2012 at 2:28

Tyler Rick

9,5606 gold badges64 silver badges64 bronze badges

answered Dec 13, 2010 at 11:25

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

GusDeCooL Over a year ago

thank you for understand if ID just only for example, and also your code $("#2").insertBefore("#1"); is clearing my problem... thank you very much :)

David Tang · Accepted Answer · 2010-12-13 12:47:09Z

8

Simply do:

$('#1').before($('#2'));

answered Dec 13, 2010 at 12:47

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

2 Comments

Francisco Corrales Morales Over a year ago

why the $('#2') instead of just '#2' ?

actaram Over a year ago

@FranciscoCorralesMorales Because, the before method expects, as parameter, an HTML string or a DOM element or an array of elements or a jQuery object. '#2' is not any of those.

Pit · Accepted Answer · 2010-12-13 12:34:30Z

3

Ever thought about using jQuery UI Sortable ?

answered Dec 13, 2010 at 12:34

Pit

1,4882 gold badges18 silver badges27 bronze badges

Collectives™ on Stack Overflow

How do I move an HTML element in jQuery?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related