Previous Tips:

• jQuery Tip #1 - Defining a Context When Using Selectors
• jQuery Tip #2 - Manipulating the DOM in a Loop
• jQuery Tip #3 – Using the data() Function
• jQuery Tip #4 – Use the on() Function for Event Handling

jQuery's selector functionality makes it easy to add new nodes into the DOM without making a lot of calls to document.createElement(). For example, the following code adds <div> and <span> nodes into the DOM and appends them to a divContainer node:

$('<div class="cust"><span /></div>').appendTo('#divContainer');

The first part of the code (before appendTo()) creates an initial set and adds it to the stack. Once the set is on the stack you can go into it and use find() to grab specific nodes and then modify them as show next:

$('<div class="cust"><span /></div>')
    .find('span')
    .html(custName) //Update with some dynamic variable
    .appendTo('#divContainer');

Once find() is invoked you're on the <span> node so it will be appended to divContainer instead of the <div> that wraps <span> when the call is appendTo() is made.

In cases where you need to dynamically generate DOM nodes, modify specific children as with the <span> shown above, and then append the newly created set into a container, what do you do? Fortunately, jQuery provides an end() function that allows you to pop the current set off the stack and then move down to the next one. In the example above, calling end() immediately before appendTo() would cause the initial <div> that wraps <span> to be appended to divContainer which would achieve the desired end result in this case. The following code shows an example of using find() and end().

$(document).ready(function () {
    var custs = getCustomerData();

    for (var i = 0; i < custs.length; i++) {
        var cust = custs[i];
        $('<div class="cust"><span /></div>')
            .find('span') //get to span
                .attr('title', cust.City)
                .data(cust)
                .html(cust.Name)
                .click(showCust)
            .end() //get back to span's parent div
            .appendTo('#divContainer');
    }
});

The code starts by creating the <div> and <span> nodes which adds a new set onto the stack. It then moves to the <span> using find() and modifies an attribute, the inner HTML, the data associated with the node, and attaches a click handler. Finally, it calls end() to move back to the wrapper <div> and then appends it to divContainer. What's convenient about this type of code is that you can create a set of nodes, hook up some data to children in the set (via the data() function) and then append the parent of the initial set all in one step.

Live Example

If you’re interested in learning more about jQuery or JavaScript check out my jQuery Fundamentals or Structuring JavaScript Code courses from Pluralsight. We also offer onsite/online training options for companies as well at http://www.thewahlingroup.com.

Conclusion

While there are certainly other ways to accomplish this type of functionality, end() can be handy to know about when you need to chain several functions together and move around in the stack.