Caching / moving markup in the DOM for reuse

Question

Bit of a weird one - bound to see some head scratching and wrinkled noses on here.

Currently developing this scrollable timeline that has users incrementally loading new modules of HTML via AJAX as they pan / scroll, so before long they can end up with quite a bit of markup on the page. As they "zoom" though (i.e. shift the scale of the timeline's X-axis), I'm having to destroy that newly generated markup and establish a new frame of reference into which new modules can be loaded.

Without getting too deep into the how and why of the timeline's inner workings, I'd like to know if there's a way in JavaScript / jQuery to cache or temporarily "move" (not just remove and rewrite) chunks of markup you've already loaded into the DOM.

I have a feeling this is wishful thinking on my part, but if anyone's put some thought into this before, I'd be interested to hear. Thanks in advance.

Answer 1

Instead of using .empty() (which it sounds like is what you're doing), you can use .detach(). The caveat with using .detach() is that you have to store a reference to the detached element(s) so you can, say .append() it later. Like this:

...
var elementCache = [];
...
// later
elementCache.push($('some-selector-here').detach());
...
// later still
$('some-other-selector').append(elementCache.pop());