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

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:

$('
', {
    html: $('
', {
        html: title
    }).after(
        $('
', {
            'text': content,
            'class': 'content'
        })
    )
}).appendTo('body');

generates:

    ...
    
some title
some content

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