JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

Table 10-4: DOM Methods to Create Nodes
Method Description Example
elements since they
have predefined
attribute names that
can be manipulated
directly.
createComment(string) Creates an
HTML/XML text
comment of the form
where
string is the comment
content.
createDocumentFragment() Creates a document
fragment that is useful
to hold a collection of
nodes for processing.
createElement(tagName) Creates an element of
the type specified by
the string parameter
tagName.
createTextNode(string) Creates a text node
containing string.
myComment =
document.createComment
("Just a comment");
myFragment =
document.createDocument
Fragment();
myFragment.appendChild
(temp);
myHeading =
document.createElement
("h1");
newText =
document.createTextNode(
"Some new text");
Note The DOM Level 1 also supports document.createCDATASection(string), document
.createEntityReference(name), and document.createProcessInstruction(target,data),
but these methods would not be used with typical (X)HTML documents. If CDATA
sections were properly supported by browsers to mask JavaScript, however, you might
see that particular method in use.
Creating nodes is easy enough if you have a good grasp of (X)HTML. For example, to make a
paragraph you would use
newNode = document.createElement('p'); // creates a paragraph
It is just as easy to make text nodes:
newText = document.createTextNode("Something to add!");
However, we need to join these objects together and insert them somewhere in the document
in order to accomplish any interesting tasks. For now, they simply sit in memory.
Inserting and Appending Nodes
The Node object supports two useful methods for inserting content: insertBefore(newChild,
referenceChild) and appendChild(newChild). In the case of appendChild(), it is invoked as a
method of the node to which you wish to attach a child, and doing so adds the node referenced
by newChild to the end of its list of children. In the case of the insertBefore() method, you
specify which child you want to insert newChild in front of using referenceChild. In practice, you
often have to access the parent node of the node you wish to run insertBefore() on to acquire