View Full Version : createDocumentFragment:

02-14-2004, 11:03 AM
Under what circumstances would there be an advantage to using this object in an html document?

02-14-2004, 02:49 PM
There is one large benefit to it - when you assign a DocumentFragment to another Node, the children of the DocumentFragment are assigned to the Node instead of the actual DocumentFragement. That means that you can assign multiple children at the same time instead of assigning them one at a time.

02-15-2004, 04:14 AM
Oh, that makes sense.

Have you seen this being put to practical use anywhere?

02-15-2004, 11:54 AM
IIRC only Mozilla supports DocumentFragment for the moment, so it's kinda limited for the moment.

02-15-2004, 12:54 PM
It is also featured in IE6: About the W3C Document Object Model (http://msdn.microsoft.com/workshop/author/dom/domoverview.asp)

edit >> Actually its listed as available from IE5+

Win16: 5
Win32: 5
Unix: 5
Mac: 5
Windows CE: 5.5

02-18-2004, 07:47 AM
Yeah but check this: if you use cloneNode(true) to copy a node from an <object>-embedded HTML document, what you get back is not a node at all - it's a document fragment with your node as its first child. Since it's in a document fragment you can't append it using appendNode, or move it with insertAdjacentElement or insertBefore - you have to copy it with outerHTML.

Stupid browser..

02-18-2004, 08:20 AM
James - is that really the problem? How about trying to use Document.importNode first, and then trying to append it?

02-18-2004, 09:22 PM
importNode doesn't work in IE - cloneNode is the only way to copy a node afaik.

It might be related the strangeness of accessing the document in the first place - IE has contentWindow.document when it's an iframe, but an <object> has no contentWindow, and IE doesn't support contentDocument, so the only way I could find to get the document is with a reference to the <object> itself. Like this example, trying to copy individual <ul> nodes out of another element in the embedded document:

var obj = document.getElementById("someObject");
var doc = obj;
var docElement = doc.getElementById("whatever");
var docTree = docElement.getElementsByTagName('ul')[0];
var docUL = docTree.cloneNode(true)

Then query the parentNode of docTree - it's a document fragment; try to append or move the docTree node - you can't, because it isn't really a node.

02-18-2004, 09:38 PM
Oh, ie quirkyness again. I was thinking that this was rather another problem: Nodes belong to a document. You can't use a node from one document in another without importing it.

But then I never counted on iew being standards compliant...

How about using Element.ownerDocument on an element in the object document?

02-19-2004, 02:11 AM
With liorean's help, we debugged this particular issue - instead of using the reference to the object, using the object property (http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/object.asp) of the object returns a #document node:

var doc = obj.object;

But it still doesn't work, because I was using cloneNode instead of importNode - the ownerDocument of the cloned node is the <object> document, so it can't be appended to the outer document, because of the cross-document security restriction. Since importNode isn't supported in win/ie, outerHTML remains the only solution (or using an iframe instead of an object) :)

Sorry this is all a bit OT though ...

03-26-2004, 06:57 PM
James: About importNode, have you seen this? <http://neo.dzygn.com/archives/individual/56>

03-26-2004, 11:33 PM
Interesting. .. more round about than what I did, but undoubtedly more elegant.