---
title: Adding items
layout: demo
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>
  </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="demo" class="iso-container">
    {% for element in site.elements_best_of limit:10 %}
      {% include element-partial.html %}
    {% endfor %}
  </div> <!-- #demo -->

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