Question

I’d like to be able to identify whether a given DOM node has been appended/inserted into another node yet, or whether it is fresh out of document.createElement() or similar and has not been placed anywhere.

In most browsers just checking the parentNode works.

if (!node.parentNode) {
  // this node is not part of a larger document
}

However, in Internet Explorer it appears that new elements, even right after they’ve been created with document.createElement() already have a parentNode object (of type DispHTMLDocument??).

Any other nice cross-browser and reliable way?

Edit: looks like Internet Explorer is implicitly creating a DocumentFragment (with nodeType of 11) and setting that as the node’s parentNode property.

Answer 1

I’ve found an answer to my own question. Sorry! I seem to be doing that a lot lately.

Document fragments have a nodeType of 11, and are never inserted into the document, so you can check it like this:

if (!node.parentNode || node.parentNode.nodeType == 11) {
  // this node is floating free
}

You only need a Document fragment when you are inserting more than one peer node. IE implicitly creates one for all newly created nodes though. Anyway checking the nodeType for 11 works.