title: JQuery append element before list-divider
body: <p>I'm building a web app which creates a list based on what users select (a bit like a shopping list).</p>
  
  <p>Lets say we have the list below already created, then user wants to add "Grapes". I want grapes to be added at the end of the fruits.</p>
  
  <pre><code>&lt;ul data-role="listview" id="listOfThings"&gt;
      &lt;li data-role="list-divider" id="fruit"&gt;Fruit&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="apple" class="addBtn"&gt;Apple&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="orange" class="addBtn"&gt;Orange&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="banana" class="addBtn"&gt;Banana&lt;/a&gt;&lt;/li&gt;
      &lt;li data-role="list-divider"&gt;Vegetables&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="carrot" class="addBtn"&gt;Carrot&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="celery" class="addBtn"&gt;Celery&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The code I have at the moment only adds the new item at the end of the list, rather than within the correct list-divider heading.</p>
  
  <pre><code>var newItemToAdd = "&lt;li&gt;&lt;a href='#' id='grapes' class="addBtn"&gt;Grapes&lt;/a&gt;&lt;/li&gt;";
  
  $("#listOfThings .ui-last-child").after($newItemToAdd);
  </code></pre>
  
  <p>(I've just thrown this code together based loosely on my actual project, so don't worrk about the full jQuery code. My question ultimately comes down to: How can I add a new list item at the end of a section, before the next list-divider?)</p>