---

title: Adding items

layout: default

category: demos

---

  <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="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>

    $(function(){

      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;

      });

      $container.isotope({

        itemSelector : '.element',

        filter: '*',

        getSortData : {

          symbol : function( $elem ) {

            return $elem.attr('data-symbol');

          }

        },

        sortBy : 'symbol'

      });

    });

  </script>