Clearest way to build html elements in jQuery

Templates are great and if you have access to them in your project, I suggest you use them. If you're using Underscore or Lodash it's built in. In some cases however, you will need to build HTML in your code whether it's refactoring or testing. I've found that the below format is the clearest to read when that is the requirement.

Note: The HTML spec allows single OR double quotes for attributes in your markup so don't bother with all the crazy escaping.

this.$fixture = $([  "<div>",  "  <div class='js-alert-box'></div>",  "  <form id='my-form-to-validate'>",  "    <input id='login-username' name='login-username'>",  "  </form>",  "</div>"].join("\n"));

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(    $("<div>")    .append(        $("<div>")        .append(            $("<h1>").text(title)        )    )    .append(        $("<div>").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.

When it comes to DOM building I try to avoid string concatenations as they might lead to subtle bugs and non properly encoded output.

I like this one:

$('<div/>', {    html: $('<h1/>', {        html: title    }).after(        $('<div/>', {            'text': content,            'class': 'content'        })    )}).appendTo('body');

generates:

    ...    <div><h1>some title</h1><div class="content">some content</div></div></body>

and it ensures proper HTML encoding and DOM tree building with matching opening and closing tags.