isotope/_posts/docs/2010-12-10-adding-items.mdown

---

title: Adding items
category: docs
layout: doc
related: methods
toc:
  - { title: addItems method, anchor: additems_method }
  - { title: insert method, anchor: insert_method }
  - { title: appended method, anchor: appended_method }

---

If your application dynamically adds new content, Isotope provides several methods to add items.

[**See Demo: Adding items**](../demos/adding-items.html).

## addItems method

The [`addItems` method](methods.html#additems) adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element.

{% highlight javascript %}

var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').append( $newItems ).isotope( 'addItems', $newItems );

{% endhighlight %}

## insert method

More likely, you want to use the [`insert` method](methods.html#insert), which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out.

{% highlight javascript %}

var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').isotope( 'insert', $newItems );

{% endhighlight %}

## appended method

The [`appended` method](methods.html#appended) is a convenience method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and **not** use filtering or sorting.  `appended` is the best method to use with Infinite Scroll.

[**See Demo: Infinite Scroll**](../demos/infinite-scroll.html).

See also [Infinite Scroll with filtering or sorting](troubleshooting.html#infinite_scroll_with_filtering_or_sorting)
docs : add Adding items docs and demo 14 years ago			`---`

			`title: Adding items`
			`category: docs`
			`layout: doc`
docs : index gets sweet Isotoped menu 14 years ago			`related: methods`
docs : add table of contents to pages 14 years ago			`toc:`
			`- { title: addItems method, anchor: additems_method }`
			`- { title: insert method, anchor: insert_method }`
			`- { title: appended method, anchor: appended_method }`
docs : add Adding items docs and demo 14 years ago
			`---`

			`If your application dynamically adds new content, Isotope provides several methods to add items.`

docs : tweaks and some more to intro 14 years ago			`[See Demo: Adding items](../demos/adding-items.html).`

docs : add table of contents to pages 14 years ago			`## addItems method`
docs : add Adding items docs and demo 14 years ago
docs : copy edits 14 years ago			The [`addItems` method](methods.html#additems) adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element.
docs : add Adding items docs and demo 14 years ago
			`{% highlight javascript %}`

			`var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');`
docs : remove syntax typo in adding items. Thx Tony Dewan 14 years ago			`$('#container').append( $newItems ).isotope( 'addItems', $newItems );`
docs : add Adding items docs and demo 14 years ago
			`{% endhighlight %}`

docs : add table of contents to pages 14 years ago			`## insert method`
docs : add Adding items docs and demo 14 years ago
docs : copy edits 14 years ago			More likely, you want to use the [`insert` method](methods.html#insert), which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out.
docs : add Adding items docs and demo 14 years ago
			`{% highlight javascript %}`

			`var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');`
docs : remove syntax typo in adding items. Thx Tony Dewan 14 years ago			`$('#container').isotope( 'insert', $newItems );`
docs : add Adding items docs and demo 14 years ago
			`{% endhighlight %}`

docs : add table of contents to pages 14 years ago			`## appended method`
docs : add Adding items docs and demo 14 years ago
docs : comments about Infinite Scroll with filtering or sorting 14 years ago			The [`appended` method](methods.html#appended) is a convenience method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and not use filtering or sorting. `appended` is the best method to use with Infinite Scroll.
docs : add Adding items docs and demo 14 years ago
docs : tweaks and some more to intro 14 years ago			`[See Demo: Infinite Scroll](../demos/infinite-scroll.html).`

docs : comments about Infinite Scroll with filtering or sorting 14 years ago			`See also [Infinite Scroll with filtering or sorting](troubleshooting.html#infinite_scroll_with_filtering_or_sorting)`