Example: DOM Methods

Setting up the HTML

First we need some HTML to work with.

<ul id="demo">
 <li>Dog</li>
 <li>Cat</li>
 <li>Fish</li>
 <li>Bird</li>
</ul>
<ul id="demo2">
 <li>Wheelbarrow</li>
 <li>Ice Cream Cone</li>
</ul>

Using DOM Methods

Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.

clone = item.cloneNode(true);
list2.append(clone);
item.remove(); // sugar for item.get('parentNode').removeChild(item);

Complete Example Source

<style>
.example ul {
 vertical-align: top;
}
</style>
<ul id="demo">
 <li>Dog</li>
 <li>Cat</li>
 <li>Fish</li>
 <li>Bird</li>
</ul>
<ul id="demo2">
 <li>Wheelbarrow</li>
 <li>Ice Cream Cone</li>
</ul>
<script type="text/javascript">
YUI().use('node', function(Y) {
 var list2 = Y.one('#demo2');
 var onList1Click = function(e) {
 var item = e.currentTarget;
 if (list2.getStyle('display') === 'none') {
 list2.show();
 }
 list2.append(item.cloneNode(true));
 };
 var onList2Click = function(e) {
 var item = e.currentTarget;
 item.remove(); // sugar for item.get('parentNode').removeChild(item);
 if (list2.all('li').size() < 1) { // hide the list if its empty
 list2.hide();
 }
 
 };
 Y.one('#demo').delegate('click', onList1Click, 'li');
 Y.one('#demo2').delegate('click', onList2Click, 'li');
});
</script>