YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Adding Node Content

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

## Node: Adding Node Content

This example demonstrates how to use events with NodeList instances.

Clicking a box will update its content.

View example in new window.

- foo
- bar

### Setting up the NodeList

First we need some HTML to work with.

<ul id="demo"> <li>foo</li> <li>bar</li> </ul>

### Adding Content

Next we will add a handler to run when the event is fired. In our handler we will add content to the node.

Note that the event handler receives an event object with its `currentTarget` set to the current Node instance, and the actual node clicked as the `target`. The context of the handler is the NodeList instance, so `this` refers to our NodeList instance.

Note that `prepend` adds the content as the `firstChild` of the Node instance, `append` ass the content as the `lastChild`, and `insert` inserts the content before the given node or childNode index.

var onClick = function(e) { var node = e.currentTarget; node.prepend('<em>prepended</em> '); // added as firstChild node.append(' <em>appended</em>'); // added as lastChild node.insert(' <strong>before last child</strong> ', node.get('lastChild')); // added before lastChild node.insert(' <strong>before childNodes[1]</strong> ', 1); // added before childNodes[1] };

### Attaching 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 = e.currentTarget; node.prepend('<em>prepended</em> '); // added as firstChild node.append(' <em>appended</em>'); // added as lastChild node.insert(' <strong>before last child</strong> ', node.get('lastChild')); // added before lastChild node.insert(' <strong>before childNodes[1]</strong> ', 1); // added before childNodes[1] }; Y.all('#demo li').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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