JQuery just created empty div doesn't have document fragment as parent

Question

When creating new html node in jQuery using

$('<some-node>some html code</some-node>');

it won't become part of DOM, until you attach it. However, it does not mean, the node has no parent.

If the node was created unempty, e.g.:

var myNewNode = $('<div>Hello</div>');

You can check the parent:

myNewNode[0].parentNode; // Who is the parent?

and see you get

DocumentFragment

as result. DocumentFragment is some object similar to document, however, not part of the DOM tree.

The strange thing comes now. When you create an empty node, like

var myNewEmptyNode = $('<div></div>');

and try to check its contents

myNewEmptyNode[0].parentNode; // Who is now the parent?

surprisingly you get

null

I cannot understand this behaviour and found nothing about it in jQuery documentation. I found it when trying to debug why javascriptMVC mxui modal was failing on an empty div.

I have tested this behaviour in both Chromium and Opera, so it does not seem to be a browser related issue.

Does someone have an explanation for this?

Gorga

What is the purpose of parentNode in that code ?! – Carny

It is the code in Mxui.Layout.Positionable in javascriptMVC. It's purpose is to move element from one place to another one: this.element[0].parentNode.removeChild(this.element[0]); document.body.appendChild(this.element[0]); – Gorga

@Samuel Hapak: The appendChild should be enough. An element can only exist at one place anyway, so it will be removed at the former place automatically. – Thiosinamine

Answer 1

That's due to the fact that jQuery uses document.createElement for "quick" HTML strings, but jQuery.buildFragment for all other (more "complex") HTML strings. <div></div> is considered quick, whereas <div>a</div> is not.

I set up a fiddle so you can check: http://jsfiddle.net/PzBSY/2/.

"Quick" is defined with the regular expression:

var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

which passes the empty div string, but not the non-empty div string. Note the if/else block after the check which makes for the two branches.

So it's basically because jQuery explicitly builds a document fragment with the non-empty div, whereas it does not with the empty div (it just uses document.createElement("div") instead).

Thiosinamine

Would you please explain why they did this? I've researched and found no clue. – Siena

@Siena Judging by this very old post from John Resig, it's for performance. – Pee

Answer 2

Here target may be any valid jQuery selectors.

only $('<div></div>') does not create any node to your DOM. It just create it virtually but not placed it to Document. To inset it into your DOM you need to use method like append(), appendTo(), insert() etc.

$('target').append($('<div class="latest"></div>'));
$('div.latest').parent();

Here I inset a div with class latest and after appending it retrieve its parent node using parent() method.

Gyrocompass

Though it's true, you didn't answer his question at all. – Carny

@Carny I know. but did OP throw a question to answer like an answer? – Gyrocompass

Perhaps it was not well formulated, I will try to make it more clear. – Gorga