How can a DIV node been "detached" and what's the use?

Question

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 ?

Answer 1

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.

Answer 2

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.