Where developers come to connect, share, build and be inspired.


jQuery DOM creation tips


I want to share a neat little trick with jQuery DOM creation.

I often see jQuery scripts create DOM elements like this:

var $elem = $('<div class="' + class_var + '">' + text + '</div>');
// OR
var $elem = $("<div>").addClass('some-class').text("text content");

There is nothing wrong with the above methods, but you can actually pass in an object to extend the element being created like so:

var $elem = $('<div/>', {
    "class" : "some-class",
    "attr" : "value",
    "text" : "text content",        // equivalent to .text()
    "html" : "<h3>title</h3>",    // equivalent to .html()
    "click" : function() { }          // click event

Using this method, you can create an DOM using a predefined object and stay away from nasty string concatenations.


Add a comment