Code convention for jQuery function chaining/nesting
<p>As jQuery devs know, jQuery allows easy dynamic HTML creation like this</p>

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

<p>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?</p>

<p>Please don't direct me to a templating library.</p>
