8

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?

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Samuel Hapak
  • 6,950
  • 3
  • 35
  • 58
  • What is the purpose of `parentNode` in that code ?! – gdoron Apr 29 '12 at 13:02
  • 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]);` – Samuel Hapak Apr 29 '12 at 14:52
  • 1
    @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. – pimvdb Apr 29 '12 at 15:55

2 Answers2

12

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).

pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • Would you please explain why they did this? I've researched and found no clue. – hbrls Sep 03 '13 at 03:54
  • @hbrls Judging by [this very old post from John Resig](http://ejohn.org/blog/dom-documentfragments/), it's for performance. – reergymerej Apr 22 '14 at 19:49
1

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.

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164