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>