This example demonstrates how to insert content when working with NodeList instances.

Click buttons to build your burger.

{{>node-insert-css}} {{>node-insert-html}} {{>node-insert-js}}

Setting up the NodeList

First we need some HTML to work with.

``` ```

Next we'll add some buttons to be clicked.

``` ```

Adding Content

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.

Note that the `this` in the handler is the object that was clicked.

``` 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('
    • '); // Insert it before the bottom bun demo.insert(obj, Y.one('.bun-bottom')); // ... } else if // other buttons follow... ```

    The handler inserts different objects into the `demo` container object in different places based on these methods:

    Attaching Events

    We assign our handler to all of the `yui3-button` objects through event subscription to the matching selector.

    ``` Y.on('click', buttonClicks, '.example .buttons-list .yui3-button'); ```

    Transitions

    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.

    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.

    ``` 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 } }); } ```

    Here's more code in the `buttonClicks` handler where we call `transitionObject`, and do some special handling for the cheese button state.

    ``` // 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('
    • '); // 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... ```

    Complete Example Source

    In the complete source you'll see we also added handling for:

    ``` {{>node-insert-source}} ```