title: Add a DOM element between two children
body: <p>I want to add a dom element between two children, specifically right before the last one.</p>
  
  <pre><code>&lt;div id='parent'&gt;
      &lt;div class='nav-option'&gt;&lt;/div&gt;
      &lt;div class='nav-option'&gt;&lt;/div&gt;
      &lt;div class='nav-option'&gt;&lt;/div&gt;
      {{I want to insert something here}}
      &lt;div class='nav-option'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Right now I am using the following code:</p>
  
  <pre><code>$('#add-account').click(function(event){                               
      $('#face').append('&lt;div class="nav-select"&gt;&lt;/div&gt;');
  }); 
  </code></pre>
  
  <p>But alas this adds the element at the end.</p>