Building HTML in jQuery and JavaScript

Building HTML in jQuery and JavaScript
to create HTML elements in JavaScript. In this article I will outline a few ways I deal with HTML. First, we’ll look at whether to use an HTML string or a jQuery object, then look at my little HTML string builder utility and finally get some links to templating libraries for building more complex HTML.

HTML String, or jQuery Object?
The first question you have to ask yourself is whether or not it makes sense to build out HTML as jQuery objects, or if you require the speed of building strings. In jQuery 1.4 you can built HTML objects that have events attached. Consider the following code.

$(”, {
id: ‘permissionsInput’,
name: ‘permissions’,
type: ‘checkbox’,
click: function() {
update()
},
checked: ‘checked’,
}).appendTo(‘#myForm’)
You can see here that not only can you build out HTML with attributes, but you can attach events (like click) too. This ability was added to jQuery in version 1.4. If you were doing this 100 times though, it might be very slow. The better way to do it would be to build out the HTML strings first, and then attach events later with jQuery’s @live@ or @delegate@ methods.

Building HTML Strings
So now you want to build an HTML string because you have a lot of elements to build and you can attach events later. There are basically two ways to do this. You can build one long HTML string and append it:

var data = [‘a’, ‘bunch’, ‘of’, ‘things’, ‘to’, ‘insert’]
var html = ”
for (var i = 0; i < data.length; i++) {
html += ” + data + ”
}
$(‘#tablerow’).append(html)
Or you can use an array which is typically a little faster.

var data = [‘a’, ‘bunch’, ‘of’, ‘things’, ‘to’, ‘insert’]
var html = []
for (var i = 0; i < data.length; i++) {
html[html.length] = ” + data + ”
}
$(‘#tablerow’).append(html)
Building Complex HTML Elements
When you are building more complex HTML, things get a little hairy in the code. Take our previous example with jQuery and turn it into raw HTML building:

html =
‘‘
Not bad, but what if those attributes were set programmatically? This is typical.

html = `<input “${inputId}” name=”${inputName}” type=”${inputType}” ${ isChecked ? ‘checked=”checked”‘ : ” } “/>`
Yuck! So to solve this I wrote a little ditty function called buildHTML. The code isn’t perfect and it could be written better (please do) but it looks like this:

buildHTML = function(tag, html, attrs) {
// you can skip html param
if (typeof html != ‘string’) {
attrs = html
html = null
}
var h = ‘<‘ + tag for (attr in attrs) { if (attrs[attr] === false) continue h += ‘ ‘ + attr + ‘=”‘ + attrs[attr] + ‘”‘ } return (h += html ? ‘>’ + html + ‘</’ + tag + ‘>’ : ‘/>’)
}
So now our code for building that same input becomes:

html = buildHTML(“input”, {
id: inputId,
name: inputName
type: inputType
checked: isChecked
});
Nicer, huh? Get the gist for buildHTML and examples. And by all means fork it and make it better.

Templating
Another way to build out more complex HTML is using templating.  a great article and some code examples for JavaScript Micro Templating There is a templating language called mustache that I see a lot of people using. Also, there has been some proposals for templating being built into jQuery’s core, however for now there is a jQuery plugin on github jquery-tmpl. Rey Bango wrote an article explaining using jQuery templating. If you have any other HTML building tips, please share!