isotope/_posts/demos/2011-01-02-adding-items.html

---
title: Adding items
layout: demo
category: demos
related: methods
---

  <section id="copy">
    <p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p>
    <p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p>
    <p>The <code>reloadItems</code> method re-collects all items in their current order in the DOM, which can be useful for prepending items.</p>
    <p>See docs on <a href="../docs/adding-items.html">adding items</a>.</p>
  </section>

  <section id="options">
    <ul class="floated clearfix">
      <li id="insert"><a href="#insert">Insert new elements</a></li>
      <li id="append"><a href='#append'>Append new elements</a></li>
      <li id="prepend"><a href='#prepend'>Prepend</a></li>
    </ul>
  </section>

  <div id="container" class="clearfix">
    {% for elem_number in site.best_of_order :limit 10 %}
      {% assign element = site.elements[elem_number] %}
      {% include element-partial.html %}
    {% endfor %}
  </div> <!-- #container -->

  <script src="../{{ site.jquery_js }}"></script>
  <script src="../{{ site.isotope_js }}"></script>
  <script src="../js/fake-element.js"></script>
  <script>

    var $container = $('#container');

    {% include add-buttons.js %}

    $('#prepend a').click(function(){
      var $newEls = $( fakeElement.getGroup() );
      $container
        .prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' })
        // set sort back to symbol for inserting
        .isotope('option', { sortBy: 'symbol' });
      
      return false;
    });

    $(function(){

      $container.isotope({
        itemSelector : '.element',
        getSortData : {
          symbol : function( $elem ) {
            return $elem.attr('data-symbol');
          }
        },
        sortBy : 'symbol'
      });
    
    });
  </script>