Question

I’m building a jQuery UI widget and when I initialize I create a several divs, anchors, inputs. I’ve read that it’s faster to build up an entire HTML string and then append it to the DOM than to append each individual DOM element.

However, I need access to those elements later, so I’m also inclined to build them individually and then append them so I already have them cached rather than selecting them after I append all the HTML.

What is generally faster?

e.g.:

var html = $('<div id="container">.....several more divs, anchors and inputs all with IDs......</div>');

<dom element>.append(html);
this.container = $('#container');
this.search = $('#search');
...and so on

or

this.container = $('<div id="container"></div>');
this.search = $('<input .... id="search" />');
...and the rest of the divs, anchors and inputs then...

<dom element>.append(this.container).append(this.search) ..... and so on

Answer 1

I also suggest reading these two blog-posts

43,439 reasons to use append() correctly

5 easy tips on how to improve code performance with huge data sets in jQuery