How to rearrange elements using jQuery?

Question

How to rearrange elements using jQuery ?

Orginal Code :

<p id="paragraph1">1</p> <p id="paragraph2">2</p> <p id="paragraph3">3</p> <p id="paragraph4">4</p> <p id="paragraph5">5</p> 

After Rearrange (put p3 in p2's place)

<p id="paragraph1">1</p> <p id="paragraph3">3</p> <p id="paragraph2">2</p> <p id="paragraph4">4</p> <p id="paragraph5">5</p> 

Answer 1

You can use .insertBefore():

$("#paragraph3").insertBefore("#paragraph2"); 

Slightly more elaborate example (clicking on a paragraph moves it up):

$("p").click(function() {    $(this).insertBefore($(this).prev());  }); 

You can test both examples here.