JQUERY append data before sibling
<p>I have got this html code</p>

<pre><code>        &lt;div class="chatp"&gt;
                &lt;div class="chatpart"&gt;
                &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>And in my jquery i am trying to append</p>

<pre><code>&lt;div class='headchat'&gt;

&lt;/div&gt;
</code></pre>

<p>Inside  <code>chatp</code> but it appends it after <code>chatpart</code> and here is what happens</p>

<pre><code>        &lt;div class="chatp"&gt;
                &lt;div class="chatpart"&gt;

                &lt;/div&gt;

                &lt;div class='headchat'&gt;

               &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>What i want is</p>

<pre><code>        &lt;div class="chatp"&gt;
                &lt;div class='headchat'&gt;

               &lt;/div&gt;
                &lt;div class="chatpart"&gt;

                &lt;/div&gt;
        &lt;/div&gt;
</code></pre>