Clearest way to build html elements in jQuery

Question

I\'ve seen a lot of different styles (and few different methods) of creating elements in jQuery. I was curious about the clearest way to build them, and als

Answer 1

After looking around for a while, I found the style which I finally settled on. First, I'll say that I used Mustache for templating, and it worked well. Sometimes, though, you just need to build an element one time, without reusing it, or have some other motivation to not bring in another library. In this situation, I have taken to using:

$("body")
.append(
    $("
")
    .append(
        $("
")
        .append(
            $("
").text(title)
        )
    )
    .append(
        $("
").text(content)
    )
);​

This works because append() returns a reference to the object you're appending to, so chained append()s attach to the same object. With proper indentation, the structure of the markup is obvious, and this way it's easy to modify. Obviously this is slower than using templates (the whole thing has to be built piece by piece), but if you're only using it for initialization or something similar then it is a great compromise.

There are many ways one could format a construct like this, but I've chosen a way to make it clear what's going on. The rule I used is that there should be a maximum of one opening parenthesis and/or one closing parenthesis on each line. Also, the leaves of these append trees do not need to be passed to the jQuery constructor, but I've done so here for visual repetition.