How to append something before a particular div with a random number

Question

I want to append a div inside a div which have many divs inside itself. My code is shown below:

<div id="main">
<div class="random no"></div>
<div class="random no"></div>
<div class="random no"></div>
<div class="random no"></div>
<div class="mydiv"></div>
</div>

My jQuery code is:

$("#main").append("<div class='random no'> </div>");

But it appends after the last child of div "main". How to insert that div before #mydiv?

Answer 1

$("<div class='random no'> </div>").insertBefore("#main .mydiv");

DEMO

or

$("#main .mydiv").before("<div class='random no'> </div>");

DEMO

or

$('#main').append("<div class='random no'> Random no</div>").after($(".mydiv"))​;

DEMO

Related refs:

• after()

• .before()

• .insertBefore()

Answer 2

$("#main").find(".mydiv").before("#yourDivToBeInserted");