Adding div before selected div
<p>I have a bunch of divs one after the other.</p>

<pre><code>&lt;div class="betweenable"&gt;some content&lt;/div&gt;
&lt;div class="betweenable"&gt;other content&lt;/div&gt;
&lt;div class="betweenable"&gt;yet another&lt;/div&gt;
</code></pre>

<p>When I click the last div, I want to insert the text <code>new content</code> in a div before it, so the final result will be</p>

<pre><code>&lt;div class="betweenable"&gt;some content&lt;/div&gt;
&lt;div class="betweenable"&gt;other content&lt;/div&gt;
&lt;div class="betweenable"&gt;new content&lt;/div&gt;
&lt;div class="betweenable"&gt;yet another&lt;/div&gt;
</code></pre>

<p>I tried <code>append</code> but it's adding the new markup <strong>inside</strong> the select div <em>at the top</em>. I want it inserted <em>outside</em> the selected div and right before it. What should I use instead of this line </p>

<pre><code>var newmarkup = '&lt;div class="betweenable"&gt;new content&lt;/div&gt;';
$(this).prepend();
</code></pre>
