Code convention for jQuery function chaining/nesting

Question

As jQuery devs know, jQuery allows easy dynamic HTML creation like this

var d = $('<div/>')
    .append('some text')
    .append(
        $('<ul/>').append(
            $('<li/>').text('list item')
                      .css("color", "blue")
                      .click(function() {
                          // do something
                      })
        )
    );

What's a good coding convention for creating dynamic HTML like this that can go down an arbitrary number of levels, while still being able to identify where I am in the element hierarchy and can spot if I've closed all the parentheses/braces properly?

Please don't direct me to a templating library.

Answer 1

Don't forget you can pass a map of properties as the second argument when creating a new element (jQuery 1.4 +):

$("<li/>", {
  text: "list item",
  css: { color: "blue" },
  click: function(){
    // do something
  }
)

See http://api.jquery.com/jQuery/#creating-new-elements