<div class="intro">
    <p>This example demonstrates how to insert content when working with <code>NodeList</code> instances.</p>
    <p>Click buttons to build your burger.</p>
</div>

<div class="example">
{{>node-insert-css}}
{{>node-insert-html}}
{{>node-insert-js}}
</div>

<h2>Setting up the NodeList</h2>
<p>First we need some HTML to work with.</p>
```
<ul class="demo">
    <li class="bun-top"><img src="assets/images/bun_top.png"/></li>
    <li class="bun-bottom"><img src="assets/images/bun_bottom.png"/></li>
</ul>
```
<p>Next we'll add some buttons to be clicked.</p>
```
<ul class="buttons-list">
    <li><button class='yui3-button patty'> Patty &#183; Before Last Bun</button></li>
    <li><button class='yui3-button lettuce'> Lettuce &#183; Before Last Bun</button></li>
    <li><button class='yui3-button cheese' disabled="disabled"> Cheese &#183; Before First Patty</button></li>
    <li><button class='yui3-button tomato'> Tomato &#183; After First Bun</button></li>
    <li><button class='yui3-button onions'> Onions &#183; After First Bun</button></li>
    <li><button class='yui3-button pickles'> Pickles &#183; After First Bun</button></li>
    <li><button class='yui3-button ketchup'> Ketchup &#183; After First Bun</button></li>
    <li><button class='yui3-button done'> Done</button></li>
    <li><button class='yui3-button another'> Another Please</button></li>
</ul>
```
<h2>Adding Content</h2>
<p>After defining some `var`s, we'll
add a `buttonClicks` handler to run when an event is fired.
It will add content to the `demo` node.</p>
<p>Note that the `this` in the handler is the object that was clicked.</p>
```
var demo = Y.one('.demo'),
    btnList = Y.all('.buttons-list .yui3-button'),
    ...;

    // This inserts burger parts and manages the display of buttons
    var buttonClicks = function (e) {
        var obj;
        if (this.hasClass('patty')) {
            // Create a node with an image of the burger part
            obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png"/></li>');

            // Insert it before the bottom bun
            demo.insert(obj, Y.one('.bun-bottom'));

            // ...
        } else if // other buttons follow...
```
<p>The handler inserts different objects into the `demo` container object
in different places based on these methods:
<ul>
    <li>`prepend` - as firstChild</li>
    <li>`append` - as lastChild</li>
    <li>`insert` - before a specified node or childNode index</li>
</ul>
</p>

<h2>Attaching Events</h2>
<p>We assign our handler to all of the `yui3-button` objects through
event subscription to the matching selector.</p>
```
Y.on('click', buttonClicks, '.example .buttons-list .yui3-button');
```
<h2>Transitions</h2>
<p>When an event handler simply inserts an object, it appears instantly, and
other DOM objects are rendered in their new locations, which
can be a visually jarring experience.
</p>
<p>
In this example, we've added a `transitionObject` function to smooth things out.
Inserted burger elements have an initial CSS `height` of 0.
After each insertion, we call the `transitionObject` function,
passing the inserted object. It begins growing to a height equal to the image
it contains (the images are different heights). This gradually pushes open a space
for itself, while it moves in from offscreen left, and fades in.
</p>
```
var transitionObject = function (obj) {
    obj.transition({
        duration: 0.8,

        // height grows from initial 0, to height of contained image
        height: obj.one('img').getStyle('height'),
        marginLeft: '0px', // transition into place from offscreen left.
        opacity: {
            delay: 0.2,
            duration: 0.5,
            value: 1
        }
    });
}
```
<p>
Here's more code in the `buttonClicks` handler where we call `transitionObject`,
and do some special handling for the cheese button state.
</p>
```
// This inserts burger parts and manages the display of buttons
var buttonClicks = function (e) {
    var obj;
    if (this.hasClass('patty')) {
        // Create a node with an image of the burger part
        obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png"/></li>');

        // Insert it before the bottom bun
        demo.insert(obj, Y.one('.bun-bottom'));

        // Smooth out insert with transition
        transitionObject(obj);

        // Cheese button becomes available
        // only when there's a patty to insert before
        Y.one('.buttons-list .cheese')._node.disabled = false;
    } else if // other buttons follow...
```
<h2>Complete Example Source</h2>
<p>
In the complete source you'll see we also added handling for:
<ul>
<li>Removing elements from the burger</li>
<li>Clicking the Done button to vertically compress the burger</li>
<li>Requesting another</li>
</ul>
</p>
```
{{>node-insert-source}}
```
