Example: DOM Methods

Setting up the HTML

First we need some HTML to work with.

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

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

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

<script type="text/javascript">
YUI().use('node', function(Y) {
    var onClick = function(e) {
        var item = e.currentTarget,
            list2 = Y.one('#demo2');

        if (item.get('parentNode') === list2) { // remove if list2
            item.remove(); // sugar for item.get('parentNode').removeChild(item);

            if (list2.all('li').size() < 1) { // hide the list if its empty
                list2.hide();
            }
        } else {
            if (list2.getStyle('display') === 'none') {
                list2.show();
            }

            list2.append(item.cloneNode(true));
        }
        
    };

    Y.one('#demo').delegate('click', onClick, 'li');
    Y.one('#demo2').delegate('click', onClick, 'li');
});
</script>