Slow DOM manipulation because .append() can't use documentFragments

[[email protected]…]

Most of us know you should touch the DOM as little as possible, especially within loops. Now, suppose you have a data set that is used to build event handlers for, let's say, list items.

In 'regular JavaScript', you'd create a documentFragment and add your list items with their handlers to it within a loop. After the loop, you'd attach the fragment to the DOM.

Now in jQuery, you can only do this if you concatenate a HTML string within the loop and then add that string to the DOM with .append(). That's all dandy, until you need to add event handlers to the newly created HTML.

I've opened a ticket in the past about how .append() should be enhanced to accept documentFragments, but that was closed down due to bad use case.

Therefore I've created a jsFiddle with three cases in it:

• current situation
• preferred situation
• current workaround

Please take a look at: ​http://jsfiddle.net/cbEEW/1/

[dmethvin]

There are several ways to do this that don't require a complete reengineering of jQuery core to make it documentFragment-friendly. I've updated that Fiddle to show two ways to do it.

​http://jsfiddle.net/dmethvin/cbEEW/2/

[Rick Waldron]

In addition to Dave's comments above, jQuery.fn.append() already uses documentFragments internally and will cache copies of all elements that will allow it safely, to reuse later.