Question

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 here}}
    <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.

Answer 1

Try this:

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

Check these out to read more:

• :last Selector
• .before()