YUI 3.x Home -

YUI Library Examples: Node: Adding Node Content

Node: Adding Node Content

This example demonstrates how to use events with NodeList instances.

Clicking a box will update its content.

  • foo
  • bar

Setting up the NodeList

First we need some HTML to work with.

  1. <ul id="demo">
  2. <li>foo</li>
  3. <li>bar</li>
  4. </ul>
<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.

  1. var onClick = function(e) {
  2. var node = e.currentTarget;
  3. node.prepend('<em>prepended</em> &nbsp;'); // added as firstChild
  4. node.append('&nbsp; <em>appended</em>'); // added as lastChild
  5. node.insert('&nbsp; <strong>before last child</strong> &nbsp;', node.get('lastChild')); // added before lastChild
  6. node.insert('&nbsp; <strong>before childNodes[1]</strong> &nbsp;', 1); // added before childNodes[1]
  7. };
    var onClick = function(e) {
        var node = e.currentTarget;
        node.prepend('<em>prepended</em> &nbsp;'); // added as firstChild
        node.append('&nbsp; <em>appended</em>');  // added as lastChild
        node.insert('&nbsp; <strong>before last child</strong> &nbsp;', node.get('lastChild')); // added before lastChild
        node.insert('&nbsp; <strong>before childNodes[1]</strong> &nbsp;', 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.

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

Full Script Source

  1. YUI().use('node', function(Y) {
  2. var onClick = function(e) {
  3. var node = e.currentTarget;
  4. node.prepend('<em>prepended</em> &nbsp;'); // added as firstChild
  5. node.append('&nbsp; <em>appended</em>'); // added as lastChild
  6. node.insert('&nbsp; <strong>before last child</strong> &nbsp;', node.get('lastChild')); // added before lastChild
  7. node.insert('&nbsp; <strong>before childNodes[1]</strong> &nbsp;', 1); // added before childNodes[1]
  8. };
  9.  
  10. Y.all('#demo li').on('click', onClick);
  11. });
YUI().use('node', function(Y) {
    var onClick = function(e) {
        var node = e.currentTarget;
        node.prepend('<em>prepended</em> &nbsp;'); // added as firstChild
        node.append('&nbsp; <em>appended</em>');  // added as lastChild
        node.insert('&nbsp; <strong>before last child</strong> &nbsp;', node.get('lastChild')); // added before lastChild
        node.insert('&nbsp; <strong>before childNodes[1]</strong> &nbsp;', 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