YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: DOM Methods

Note: This is YUI 3.x. Looking for YUI 2.x?

## Node: DOM Methods

This example demonstrates how to use the DOM methods of a Node instance.

Click any of the boxes to move them to the other list.

View example in new window.

- lorem
- ispum
- dolor
- sit

- foo

### Setting up the Node

First we need some HTML to work with.

<ul id="demo"> <li>lorem</li> <li>ispum</li> <li>dolor</li> <li>sit</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.

Now we need a handler to move a node to a new list when the `click` event fires.

Note that `appendChild` returns a Node instance representing the node that was appended.

var onClick = function(e) { var node = Y.get('#demo2').appendChild(e.currentTarget); node.addClass('yui-pass'); };

### Listening for Node Events

We can assign our handler to all of the items by using the `all` method to get a `NodeList` instance and using the `on` method to subscribe to the event.

Y.all('#demo li').on('click', onClick);

### Full Script Source

YUI().use('node', function(Y) { var onClick = function(e) { var node = Y.get('#demo2').appendChild(e.currentTarget); node.addClass('yui-pass'); }; Y.all('#demo li').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings