Creating Document Fragments

Netscape 6 supports the DOM's createDocumentFragment() method. This method creates a new node, like the createNode() method. We put the following script in the HEAD section of this page:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
}
else if (document.layers) {
}
else if (document.getElementById) {
  fragObj = document.createDocumentFragment();
}
// -->
</SCRIPT>

The type of the node created by createDocumentFragment() is 11. Other typical type numbers are 1 for a tag node, 2 for an attribute node, and 3 for a text node. Click this button in Netscape 6, and see for yourself. Click in Internet Explorer and observe the error message:

Here is the code for this button:

<INPUT TYPE="button" VALUE="What's fragObj.nodeType?"
  onClick="javascript:alert('fragObj.nodeType =
   ' + fragObj.nodeType)">

One way to distinguish between a fragment node and regular node is that it does not have a parent (parentNode is null.) Examine its parent now:

Here is the code for this button:

<INPUT TYPE="button" VALUE="What's fragObj.parentNode?"
  onClick="javascript:alert('fragObj.parentNode =
   ' + fragObj.parentNode)">

Still, it belongs to the document. Examine its owner document:

Here is the code for this button:

<INPUT TYPE="button" VALUE="What's fragObj.ownerDocument?"
  onClick="javascript:alert('fragObj.ownerDocument =
   ' + fragObj.ownerDocument)">

Finally, examine its name:

Here is the code for this button:

<INPUT TYPE="button" VALUE="What's fragObj.nodeName?"
  onClick="javascript:alert('fragObj.nodeName =
   ' + fragObj.nodeName)">

In order to add the fragment node to the DOM tree, you must explicitly call one of the node insert methods — insertBefore, replaceChild, or appendChild.

Next: How to use the innerHTML property, browser-independently