StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>here's your example in "one" line.</p> <pre><code>this.$OuterDiv = $('<div></div>') .hide() .append($('<table></table>') .attr({ cellSpacing : 0 }) .addClass("text") ) ; </code></pre> <hr> <p><em>Update</em>: 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 <code>$("<div>")</code> vs <code>$("<div></div>")</code> vs <code>$(document.createElement('div'))</code> as a way of creating new elements, and which is "best".</p> <p>I put together <a href="http://jsbin.com/elula3" rel="noreferrer">a small benchmark</a>, and here's roughly the results of repeating the above options 100,000 times:</p> <p><strong>jQuery 1.4, 1.5, 1.6</strong></p> <pre><code> Chrome 11 Firefox 4 IE9 <div> 440ms 640ms 460ms <div></div> 420ms 650ms 480ms createElement 100ms 180ms 300ms </code></pre> <p><strong>jQuery 1.3</strong></p> <pre><code> Chrome 11 <div> 770ms <div></div> 3800ms createElement 100ms </code></pre> <p><strong>jQuery 1.2</strong></p> <pre><code> Chrome 11 <div> 3500ms <div></div> 3500ms createElement 100ms </code></pre> <p>I think it's no big surprise, but <code>document.createElement</code> 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 <em>per thousand elements</em>. </p> <p><strong>Update 2</strong></p> <p>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!</p> <p><a href="http://jsben.ch/#/ARUtz" rel="noreferrer">http://jsben.ch/#/ARUtz</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload