title: Insert multiple divs in list
body: <p>I have a list where need to insert the div for the list item, if use the simple .InsertBefore, will multiply infinitely elements</p>
  
  <p>How can insert the div without duplicating other items?</p>
  
  <p>Example: <a href="http://jsfiddle.net/HJCps/" rel="nofollow">jsfiddle.net/HJCps</a></p>
  
  <p>Html Code</p>
  
  <pre><code>&lt;div id="sorter"&gt;
  
      &lt;div class="item item-1"&gt;
          &lt;div class="text"&gt;Item 1&lt;/div&gt;
          &lt;div class="insert"&gt;Insert Text 1&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item item-2"&gt;
          &lt;div class="text"&gt;Item 2&lt;/div&gt;
          &lt;div class="insert"&gt;Insert Text 2&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item item-3"&gt;
          &lt;div class="text"&gt;Item 3&lt;/div&gt;
          &lt;div class="insert"&gt;Insert Text 3&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Code</p>
  
  <pre><code>$('.insert').insertBefore('.text');
  </code></pre>