ks_27q

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.

Sign in or sign up to add your response.

14 Responses

12355
0  fjjc o2mybkqh9cttoccko2jya14 bcr6dcclpr6mlgff8by3da2aeoc lduknr1xris9mtv eb

Alex, this is really cool.

over 1 year ago ·
12401
Be1ef80a75fee688915790220747217c

"There is nothing wrong with the above methods". I'd really say any string concatenation should probably be avoided since (if the class name is influenced by some external input) it can lead to an XSS vulnerability.

http://jsbin.com/akuPUCa/2/edit?html,js,output

over 1 year ago ·
12443

Interesting but chaining methods is way faster!

http://jsperf.com/jquery-different-ways-to-create-dom-elements

over 1 year ago ·
12448
Dc91d9ceda78621d0b3a2330874f1f14

i prefer chaining method.
i makes thing easier and readable.
http://jsbin.com/IGaCuTe/2/edit?html,js,output

chaining is wonderful while creating dom if you creating doms like table rows.
http://jsbin.com/AwipUrer/2/edit?html,js,output

over 1 year ago ·
12453
147186f2f9c90edfc509a0b045038736

this is very useful, thanks

over 1 year ago ·
12457
F13494ed342a7bf456296269b69770e4

Nice tip. Thanks.

over 1 year ago ·
12470
069ee838e992fd538c694fd562ae4f3f

"As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset." -- http://api.jquery.com/jquery/#jQuery-html-attributes

For example:


$('<img>', {
'class': 'avatar',
src: 'avatar.jpg',
css: {
maxWidth: '300px', maxHeight: '300px',
display: none
},
data: {
capture: 'true'
}
})
</code></pre>
over 1 year ago ·
12479
7076bccb4a948c42b7e7e37f651fa87c

Interesting..

Take a look at this.

http://jsperf.com/dom-creation-chaining-vs-object

over 1 year ago ·
12488
B3ef4a6fe101a2a487ec04bc33ca3784

Cool.. Nice tip... :)

over 1 year ago ·
12491
Om visionary.png

I don't think this is a tip, as jQuery docs themselves mention it.
http://api.jquery.com/jquery/#example-1-1.

A tip would be something unusual, that helped an original problem.

Also, $('<div/>', { ... }) is an incredibly slow method.

$( document.createElement('div'), { ... }) can be a more faster alternative.

Also, if you had reference to document in a local variable, say doc, doc.createElement would be more optimised.

over 1 year ago ·
12500
187f3356c852d3962517834d20aa18f7 normal

Yup, chaining is faster, didn't even know about the Object method of doing this (RTFM).

But for readability, I like the Object method.

over 1 year ago ·
12647

IMHO, better to do something like this:
$(document.createElement('div'), { ... })

over 1 year ago ·
12879
10309058 10152457564452360 4465802230248535815 n

cool.thanks for the tip :)

over 1 year ago ·
12886
Avatar

Created a jsPerf to really see which method is faster, http://jsperf.com/jquery-vanilla-js-dom-creation

For some reason my test give different results for chaining then the tests from alexcheuk.

The best tip is not to use jQuery to create elements.

over 1 year ago ·