Add a DOM element between two children

I want to add a dom element between two children, specifically right 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 her开发者_StackOverflow中文版e}}
    <div class='nav-option'></div>
</div>

Right now I am using the following code:

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

But alas this adds the element at the end.

---

Try this:

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

Check these out to read more:

• :last Selector
• .before()

---

Check out insertAfter() or insertBefore()

---

jquery has .insertBefore and .insertAfter that both do what you want.

---

Try

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