Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#9903 closed enhancement (worksforme)

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

Reported by: [email protected] Owned by:
Priority: low Milestone: None
Component: manipulation Version: 1.6.2
Keywords: Cc:
Blocked by: Blocking:


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/

Change History (2)

comment:1 Changed 12 years ago by dmethvin

Resolution: worksforme
Status: newclosed

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.


comment:2 Changed 12 years ago by Rick Waldron

Component: unfiledmanipulation
Priority: undecidedlow

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.

Note: See TracTickets for help on using tickets.