title: JQuery Isotope sort after append
body: <p>I tried this  </p>
  
  <pre><code>$("#add").click(function(){
      var $newIems = $("&lt;div class='post-body post item'&gt;itemName&lt;/div&gt;")
      $(".items").isotope("append", $newIems, true);
  });
  
  $("#sort").click(function(){
      $('.items').isotope({
          getSortData : {
              content: function ( $elem ) {
                  return $elem.find('.post-content').text();
              }
          }
      });
      $('.items').isotope({ sortBy : 'date' });
      $('.items').isotope( 'reLayout' )
  
  });
  </code></pre>
  
  <p>But the items wont get sorted. is it possible in general to add new items to the isotope container and sort them after? What I want to do is just to append the new items on the top of my straightDown isotope list.</p>
  
  <p><strong>Update1:</strong><br>
  The item is already appending on the top with using prepend().<br>
  My prepend code is equal to Hady ones (the answer second answer below this question).<br>
  But it still appends in the second item because there wont be set a css top value, here is the DOM:  </p>
  
  <pre><code>&lt;div class="items isotope" style="position: relative; overflow: hidden; height: 354px;"&gt;
         &lt;div class="item isotope-item" style="position: absolute;"&gt;addedItem&lt;/div&gt;
         &lt;div class="item isotope-item" style="position: absolute; left: 0px; top: 0px;"&gt;item1&lt;/div&gt;
         &lt;div class="item isotope-item" style="position: absolute; left: 0px; top: 81px;"&gt;item2&lt;/div&gt;
         &lt;div class="item isotope-item" style="position: absolute; left: 0px; top: 172px;"&gt;item3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and as you can see, the existing items also didnt get additional +top pixel. So I guess I have to call reLayout() after appending the new item?</p>