write them as long string and than place them in the document using a
suitable jQuery function. Something like:
The problem with this approach is that you'll need a multi-line string - something Javascript doesn't support - so in reality you'll end up with:
elem.html(
''+
'
'+
'Some text'+
'
'+
'
'+
'Other text'+
'
'+
'
Using the method you suggested above, this is about as clean as I could manage to get it:
elem.append(
$('', {'class': 'wrapper'}).append(
$('', {'class': 'inner'}).append(
$('', {text: 'Some text'})
)
)
.append(
$('', {'class': 'inner'}).append(
$('', {text: 'Other text'})
)
)
);
The other advantage to doing this is that you can (if desired) get direct references to each newly created element without having to re-query the DOM.
I like to write polyglots, so to make my code re-usuable I usually do something like this, (as jQuery's .html() doesn't support XML):
// Define shorthand utility method
$.extend({
el: function(el, props) {
var $el = $(document.createElement(el));
$el.attr(props);
return $el;
}
});
elem.append(
$.el('div', {'class': 'wrapper'}).append(
$.el('div', {'class': 'inner'}).append(
$.el('span').text('Some text')
)
)
.append(
$.el('div', {'class': 'inner'}).append(
$.el('span').text('Other text')
)
)
);
This isn't very different to method #2 but it gives you more portable code and doesn't rely internally on innerHTML.
