Add a DOM element between two children

Question

I want to add a dom element between two child elements, especially just before the last one.

<div id='parent'> <div class='nav-option'></div> <div class='nav-option'></div> <div class='nav-option'></div> {{I want to insert something here}} <div class='nav-option'></div> </div> 

Now I am using the following code:

 $('#add-account').click(function(event){ $('#face').append('<div class="nav-select"></div>'); }); 

But alas, this adds an element to the end.

Answer 1

Try the following:

 $('div.nav-option:last') .before('<div class="nav-select"></div>'); 

Check it out to find out more:

• :last selector
• .before()

Answer 2

Check insertAfter () or insertBefore ()

Answer 3

jquery has .insertBefore and .insertAfter which do what you need.

Answer 4

Try

 $('.nav-option:last').before('<div class="nav-select"></div>');