Best way to create large static DOM elements in JavaScript?

I have many elements that one of my JS widgets needs to create and add to the DOM often. They never change.

So one option would be to store the HTML itself as a string in JS and use JQuery to create the elements from the string, then append it to the document:

var elements = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
function create() {
  return $(elements);
}
$("body").append(create());

Another option is to write a function that will use document.createElement(“div”), or $(“<div>”) many times to build the elements, append them to each other where needed, then append to the document:

function create() {
  return $("<div>").append($("<table>")......
}
$("body").append(create());

In the first case, I have a big JS string that is actually HTML. In the second case, I have an unwieldy piece of JS that actually represents HTML.

Are there (dis)advantages to one or the other? Is there a better solution I’m not thinking of?

Answer

Note: If you hate reading, just check summary down below for final answer

Maybe you don’t really need to create those with help of jQuery.

If the structure of that html is complicated (hence using document.createElement approach would be an overkill) I would go with innerHTML attribute.

// somewhere in your code, preferably outside of global scope
var div = document.createElement('div')
div.id = 'mycustomdiv'
document.getElementsByTagName('body')[0].appendChild(div);
// assuming elements contains string of html with your elements
div.innerHTML = elements;

That way you avoid the (assuming again) unnecessary overhead of creating and wrapping the elements in jQuery object.

---

Update: test for yourself what’s the fastest method http://jsperf.com/creating-complex-elements. This test confirms that when you’re trying to squeeze every last bit of performance revert to vanilla javascript and classic DOM operations.

---

Update 2. To investigate why innerHTML method on Firefox 10 have such bad results in relation to passing full string to jQuery.append, I took a look at the jQuery source.

As it turns out (in jQuery 1.7.1), they’re using yet another way of creating dom elements by utilizing document.createDocumentFragment (with some fallbacks of course for browsers that don’t have proper support).

DocumentFragments are DOM Nodes. They are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. In the DOM tree, the document fragment is replaced by all its children.

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow.

Assuming createDocumentFragment is available it turns out to be the best approach in terms of overall cross-browser performance of script.

So, to sum up:

I stand corrected. If you’re looking for best performance throughout different browsers when creating new DOM elements, focus on document fragments (use jQuery if you don’t want to deal with various corner cases yourself).

For more reading concerning documentFragment check this post on John Resig blog http://ejohn.org/blog/dom-documentfragments/