HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptCritical

jQuery document.createElement equivalent?

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
jqueryequivalentcreateelementdocument

Problem

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);


I would like to know if there is a better way to do this using jQuery. I've been experimenting with:

var odv = $.create("div");
$.append(odv);
// And many more


But I'm not sure if this is any better.

Solution

Here's your example in the "one" line.

this.$OuterDiv = $('')
    .hide()
    .append($('')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;


Update: I thought I'd update this post since it still gets quite a bit of traffic. In the comments below there's some discussion about $("") vs $("") vs $(document.createElement('div')) as a way of creating new elements, and which is "best".

I put together a small benchmark, and here are roughly the results of repeating the above options 100,000 times:

jQuery 1.4, 1.5, 1.6

Chrome 11  Firefox 4   IE9
            440ms      640ms    460ms
      420ms      650ms    480ms
createElement    100ms      180ms    300ms


jQuery 1.3

Chrome 11
             770ms
      3800ms
createElement     100ms


jQuery 1.2

Chrome 11
            3500ms
      3500ms
createElement     100ms


I think it's no big surprise, but document.createElement is the fastest method. Of course, before you go off and start refactoring your entire codebase, remember that the differences we're talking about here (in all but the archaic versions of jQuery) equate to about an extra 3 milliseconds per thousand elements.

Update 2

Updated for jQuery 1.7.2 and put the benchmark on JSBen.ch which is probably a bit more scientific than my primitive benchmarks, plus it can be crowdsourced now!

http://jsben.ch/#/ARUtz

Code Snippets

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;
Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms
Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms
Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

Context

Stack Overflow Q#268490, score: 1375

Revisions (0)

No revisions yet.