How to put one element before another with jQuery?

Question

How to make a certain HTML before another div? I tried using prepend but it puts at first into the div but I want it to put up/before and outside of it, using prepend she gets like this:

<div class="pai"><div>FILHO</div></div>

but the right and necessary for me would be so:

<div>FILHO</div><div class="pai"></div>

is possible with which code?

Answer 1

To remove the div with HTML FILHO from inside the div .pai and put the same before of the div .pai you can do it like this:

Initial HTML:

<div class="pai">
    <div>FILHO</div>
</div>

jQuery:

var pai = $('.pai');
var filho = pai.find('div'); // vai buscar a div que tem HTML filho
filho.insertBefore(pai); // inserir div que tem HTML filho antes da div .pai

HTML final:

<div>FILHO</div>
<div class="pai"></div>

jsFiddle: http://jsfiddle.net/6717y46x/