Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript detach: detach a node from the DOM, optionally reattaching it when done.
/*!
* 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);
}
}
// 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);
});
@cowboy

This comment has been minimized.

Copy link
Owner Author

commented Apr 25, 2011

@mathiasbynens

This comment has been minimized.

Copy link

commented Apr 25, 2011

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.

@cowboy

This comment has been minimized.

Copy link
Owner Author

commented Apr 25, 2011

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

@mathiasbynens

This comment has been minimized.

Copy link

commented Apr 25, 2011

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!

@chaosClown

This comment has been minimized.

Copy link

commented Aug 13, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.