fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>This example demonstrates how insert content when working with <code>NodeList</code> instances.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>Clicking a box will update its content.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-insert-source}}
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the NodeList</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<ul id="demo">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>foo</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>bar</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Adding Content</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Next we will add a handler to run when the event is fired. In our handler we will add content to the node.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Note that the event handler receives an event object with its <code>currentTarget</code> set to the current Node instance, and the actual node clicked as the <code>target</code>. The context of the handler is the NodeList instance, so <code>this</code> refers to our NodeList instance.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Note also that <code>prepend</code> inserts content as the <code>firstChild</code> of the Node instance, <code>append</code> inserts content as the <code>lastChild</code>, and <code>insert</code> places content before the specified node or childNode index.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney var onClick = function(e) {
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.prepend('<em>prepended</em> '); // added as firstChild
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.append(' <em>appended</em>'); // added as lastChild
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.insert(' <strong>before last child</strong> ', node.get('lastChild')); // added before lastChild
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.insert(' <strong>before childNodes[1]</strong> ', 1); // added before childNodes[1]
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Attaching Events</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>We can assign our handler to all of the items by using the <code>all</code> method to get a <code>NodeList</code> instance and using the <code>on</code> method to subscribe to the event.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt SweeneyY.all('#demo li').on('click', onClick);
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-insert-source}}