Change place of DOM elements with jQuery

Question

I want to change places of my dynamic elements in my webpage with jQuery, here is the code which I have this code.

<div class="div1"><label>Name</label></div>
<div class="div2"><label>Address</label></div>
<div class="div3"><label>User No</label></div>

and how I want to do with jQuery at run time

<div class="div1"><label>Name</label></div>
<div class="div3"><label>User No</label></div>
<div class="div2"><label>Address</label></div>

I want to move div2 after div3. Thanks in advance!

Answer 1

Also you can try with insertBefore(selector) as below:

$(".div3").insertBefore(".div2");

Code Snippet

$(".div3").insertBefore(".div2")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"><label>Name</label></div>
<div class="div2"><label>Address</label></div>
<div class="div3"><label>User No</label></div>

Answer 2

Try to use .insertAfter(selector) at this context,

$("div.div2").insertAfter(".div3");

DEMO