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>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>
    </ul>
  </section>

  <div id="container" class="iso-container">
    {% for element in site.elements_best_of limit:10 %}
      {% include element-partial.html %}
    {% endfor %}
  </div> <!-- #container -->

  <script src="../js/jquery-1.4.4.min.js"></script>
  <script src="../src/mini-modernizr.js"></script>
  <script src="../src/jquery.opto-transform.js"></script>
  <script src="../src/jquery.smartresize.js"></script>
  <script src="../src/jquery.isotope.js"></script>
  <script src="../src/jquery.ui.widget.js"></script>
  <script src="../js/fake-element.js"></script>
  <script>
    $(function(){

      var $container = $('#container');
    
      $container.isotope({
        itemSelector : '.element',
        getSortData : {
          symbol : function( $elem ) {
            return $elem.attr('data-symbol');
          }
        },
        sortBy : 'symbol'
      });
    
      {% include add-buttons.js %}
    
    
    });
  </script>