5cd4555ad444fd391002ae32450572054369fd42Rob Austein<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

5cd4555ad444fd391002ae32450572054369fd42Rob Austein

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein<div class="intro">

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson <p>Click any of the blue boxes to copy to the other stack.</p>

a9f68291c8db8111b88442635a04dfd35221411bAutomatic Updater <p>Click a box in the other stack to remove it completely.</p>

c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews</div>

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson

ec5347e2c775f027573ce5648b910361aa926c01Automatic Updater<div class="example">

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson{{>dom-node-source}}

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson</div>

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<h2>Setting up the HTML</h2>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<p>First we need some HTML to work with.</p>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews```

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<ul id="demo">

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>lorem</li>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>ipsum</li>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>dolor</li>

9c49c394b4218cc9c743a372a8fcfb787f5ea8caAndreas Gustafsson <li>sit</li>

f5d30e2864e048a42c4dc1134993ae7efdb5d6c3Mark Andrews</ul>

a9f68291c8db8111b88442635a04dfd35221411bAutomatic Updater

072440df4f65033eb058c06f2cc72be450606720Jeremy Reed<ul id="demo2">

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein <li>foo</li>

de10c46b2a714b0fb74837da7867f55cccc6d261Jeremy Reed <li>bar</li>

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein</ul>

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein```

072440df4f65033eb058c06f2cc72be450606720Jeremy Reed<h2>Using DOM Methods</h2>

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

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein```

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein clone = item.cloneNode(true);

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein list2.append(clone);

072440df4f65033eb058c06f2cc72be450606720Jeremy Reed item.remove(); // sugar for item.get('parentNode').removeChild(item);

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein```

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein<h2>Complete Example Source</h2>

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein```

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein{{>dom-node-source}}

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein```

268a4475065fe6a8cd7cc707820982cf5e98f430Rob Austein