In this article a detached Div node is created: .htm

I don't understand : I thought that DOM owns every nodes. How would you attach to DOM then ?

Last but not least what would be the purpose of having detached node ?

In this article a detached Div node is created: http://www.bennadel.com/blog/1008-jQuery-empty-Kills-Event-Binding-On-Persistent-Nodes.htm

I don't understand : I thought that DOM owns every nodes. How would you attach to DOM then ?

Last but not least what would be the purpose of having detached node ?

• javascript
• jquery
• dom

• Where exactly is the detached <div> node created? – Ayman Safadi Commented Jan 1, 2012 at 17:38

5 Answers 5

I'm not sure which answer you expect, so here are some thoughts:

I thought that DOM owns every nodes.

The document owns every node. Each node has an ownerDocument ^[MDN] property.

From the specification:

The Document interface represents the entire HTML or XML document. Conceptually, it is the root of the document tree, and provides the primary access to the document's data.

Since elements, text nodes, comments, processing instructions, etc. cannot exist outside the context of a Document, the Document interface also contains the factory methods needed to create these objects. The Node objects created have a ownerDocument attribute which associates them with the Document within whose context they were created.

How would you attach to DOM then?

There are various ways to insert a new node, such as appendChild ^[docs] or insertBefore ^[docs].

Last but not least what would be the purpose of having detached node ?

One advantage is that you can build complex subtrees offline so that the browser does not have to recalculate the layout every time you insert a node.

Sometimes it is also useful for parsing an HTML string. By creating an empty, detached div and assign the HTML string to innerHTML, you can parse and process the HTML string easily.

The only caveat is that document.getElementById cannot find nodes which are not part of the tree.

Also interesting in this regard might be the explanation for the Node.parentNode property. After all, a Node which does not have parent is not part of the tree:

The parent of this node. All nodes, except Attr, Document, DocumentFragment, Entity, and Notation may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.

with document.createElement(), you can create an element node

var p = document.createElement("p");

At this point though, it will exist in memory but will not have been attached to the DOM.

There are numerous ways in which a node can be attached to the DOM, but probably the easiest would be using element.appendChild(node)

var p = document.createElement("p");

// attach the newly created node to the document body
document.body.appendChild(p);

You may want to create the element first, manipulate it and then attach to the DOM so that your manipulations do not cause browser reflow e.g. if you're setting the background colour, border, appending child elements, etc. you want to do this in memory without each change having to be reflected as a visual change in the browser.

Modifying the DOM is expensive. You can create a detached object, set it up the way you need to (adding its attributes, binding event handlers, etc). After its setup the way you want, then append it to the DOM.

You can definitely create elements that are not part of the DOM.

var someElement = document.createElement("div");
var someOtherElement = $("<div>");

Performing operations on detached elements are far more efficient than performing operations on attached elements because detached elements do not have to be rendered.

The page you linked to uses .empty() which detaches elements from the DOM and removes all event handlers from those elements.

There is also .detach(), which may be what you mean. .detach() basically just, well, detaches the node from the DOM. It's not part of the DOM anymore; it's just hanging around in memory (as long as you keep it in a variable). This means that if you discard the variable, you've lost the detached node forever (it's not in the DOM nor in a variable).

A use case is e.g. temporarily "removing" an element from the DOM without actually dismissing it, so that you can attach it later (using .append/.after/etc).

var detached = $("...").detach();

// later:
$("body").append(detached);