fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">

3496458db77b038498385242f5f64a2aadd4441fMatt Sweeney <p>Click any of the blue boxes to copy to the other stack.</p>

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney <p>Click a box in the other stack to remove it completely.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>dom-node-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney<h2>Setting up the HTML</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<ul id="demo">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>lorem</li>

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney <li>ipsum</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>dolor</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>sit</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</ul>

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney<ul id="demo2">

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney <li>foo</li>

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney <li>bar</li>

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney</ul>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Using DOM Methods</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney clone = item.cloneNode(true);

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney list2.append(clone);

4205bf35605a834a3f80bf2ecf4e017040437736Matt Sweeney item.remove(); // sugar for item.get('parentNode').removeChild(item);

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

07dcb72a9c4129c6ab13ec15033906e55e4c0d47Luke Smith

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>dom-node-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```