JavaScript detach: detach a node from the DOM, optionally reattaching it when done.

ba-detach.js

/*!
 * JavaScript detach - v0.2 - 5/18/2011
 * http://benalman.com/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

function detach(node, async, fn) {
  var parent = node.parentNode;
  var next = node.nextSibling;
  // No parent node? Abort!
  if (!parent) { return; }
  // Detach node from DOM.
  parent.removeChild(node);
  // Handle case where optional `async` argument is omitted.
  if (typeof async !== "boolean") {
    fn = async;
    async = false;
  }
  // Note that if a function wasn't passed, the node won't be re-attached!
  if (fn && async) {
    // If async == true, reattach must be called manually.
    fn.call(node, reattach);
  } else if (fn) {
    // If async != true, reattach will happen automatically.
    fn.call(node);
    reattach();
  }
  // Re-attach node to DOM.
  function reattach() {
    parent.insertBefore(node, next);
  }
}

usage.js

// Get an element.
var elem = document.getElementById('huge-ass-table');

// Just detach element from the DOM.
detach(elem);

// Detach + exec fn + reattach, synchronous.
detach(elem, function() {
  // this == elem, do stuff here.
});

// Detach + exec fn + reattach, asynchronous.
detach(elem, true, function(reattach) {
  // this == elem, do stuff here, call reattach() when done!
  setTimeout(reattach, 1000);
});

Unit tests on JSFiddle

Could you please explain how fn.call(node, done); invokes done? I don’t really get that part. I thought it would invoke fn using node as this, passing done as an argument to fn.

Mathias, the user calls done in their callback, like in my "Asynchronous" usage example.

Doh! #facepalm

I was confusing the two because in the example usage it’s sync first, then async, but in the code it’s the other way around. My bad!

I recommend using this function for save use:

function reattach() {
    parent[next?"insertBefore":"append"](node, next);
}

In Mozilla Firefox, if referenceNode is null, newNode is inserted at the end of the list of child nodes. In Internet Explorer, an undefined value as referenceNode will throw an "Invalid argument" exception, while in Chrome it will throw an "Uncaught TypeError" since it expects both the arguments. > https://developer.mozilla.org/de/docs/Web/API/Node/insertBefore

nice idea, thanks for sharing