<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
<div class="intro">
<p>Click any of the blue boxes to copy to the other stack.</p>
<p>Click a box in the other stack to remove it completely.</p>
</div>
<div class="example">
{{>dom-node-source}}
</div>
<h2>Setting up the HTML</h2>
<p>First we need some HTML to work with.</p>
```
<ul id="demo">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
<ul id="demo2">
<li>foo</li>
<li>bar</li>
</ul>
```
<h2>Using DOM Methods</h2>
<p>Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.</p>
```
clone = item.cloneNode(true);
list2.append(clone);
item.remove(); // sugar for item.get('parentNode').removeChild(item);
```
<h2>Complete Example Source</h2>
```
{{>dom-node-source}}
```