Why $(document).append() doesn't work in jQuery 1.9.1?

Question

Why following piece of code doesn't work since jQuery 1.9.1? With previous versions works fine.

$(function () { 
    $(document).append(test);
    document.write('done');
});
var test = {
    version: "1.0",
};

JSFiddle: http://jsfiddle.net/Chessjan/NsjqM/

In JS console it issues error like this:

TypeError: document is null
safeFrag = document.createDocumentFragment(); jquery-1.9.1.js (line 5823)

Edit:

Thanks everybody for quick and extensive aswers. Observed issue was found by accident, and of course, $(document.body).append() is proper approach.

You normally append stuff to `head` or `body`. Any specific reason for appending stuff to `document`? — Salman A, Mar 05 '13 at 10:30
The real mystery is why it should have worked in the first place. — Beetroot-Beetroot, Mar 05 '13 at 10:34
I am preplexed, can we append to document? because I think, document is not a element (or tag) like `body` or `html` tags. — Mr_Green, Mar 05 '13 at 10:59

score 16 · Accepted Answer · answered Mar 05 '13 at 10:41

16

jQuery 1.9.x calls

this[ 0 ].ownerDocument

within its buildFragment() method. Since you pass in the document, the call

document.ownerDocument

will reference to null and cause the error. Any other node will reference the document, which of course, works.

Conclusion: Don't call $(document).append() but use $(document.body) for instance.

answered Mar 05 '13 at 10:41

jAndy

231,737
57
305
359

Other answers were also right, but this one exactly explained source of the issue. Thanks. – Chessjan Mar 05 '13 at 11:45

score 3 · Answer 2 · answered Mar 05 '13 at 10:42

Your code will of never worked. It has to document.body not document.

Here's a few examples in different versions of it not working:

jQuery 1.6.4: http://jsfiddle.net/us9Kz/
jQuery 1.7.2: http://jsfiddle.net/us9Kz/1/
jQuery 1.8.3: http://jsfiddle.net/us9Kz/3/
jQuery 1.9.1: http://jsfiddle.net/us9Kz/4/
jQuery 2.0.0b1: http://jsfiddle.net/us9Kz/5/

Code working with document.body (on jQuery 1.9.1): http://jsfiddle.net/us9Kz/6/

Matthias Wegtun · Answer 3 · 2013-03-05T10:47:46.500

1

To answer your question i tried in JSfiddle all the available jQuery versions. It happened to give the same error.

Why it doesnt work: document becomes something like [object HTMLDocument] when cast to string, and there is of course no such id, it will return null.

The following works:

var test = "1.0"
$('body').append(test);

or doing it trough object notation like you did:

var test = {
    version: '1.0'
}
$('body').append(test.version)

edited Mar 05 '13 at 10:47

answered Mar 05 '13 at 10:35

Matthias Wegtun

1,231
1
9
13

Sure a better approach, but doesn't answer the question either. – jtheman Mar 05 '13 at 10:37
1

you are right so i editted it somehow to answer the question thanks for your feedback makes me read the question better =) have a nice day – Matthias Wegtun Mar 05 '13 at 10:56

score 1 · Answer 4 · answered Mar 05 '13 at 10:43

Inside the jQuery code it has this line:

jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );

this is the jQuery object you selected. In your case, the document. The ownerDocument value of document is null and this is what is passed through as document to the call to document.createDocumentFragment();. Hence you get the error that document is null (Slightly bad naming of variables there as it makes you think the document object itself is somehow null)

As other people have said. Append to the body instead and it will work fine.

Why $(document).append() doesn't work in jQuery 1.9.1?

4 Answers4

Linked