#

# Example: DOM Methods

Click any of the blue boxes to copy to the other stack.

Click a box in the other stack to remove it completely.

- Dog
- Cat
- Fish
- Bird

- Wheelbarrow
- Ice Cream Cone

## 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>