Creating Nodes


Now that we know how to move around a tree and access its elements, it is time to discuss manipulation of the document tree by creating and inserting nodes. The DOM supports a variety of methods related to creating nodes as a part of the Document object, as shown in Table 10-4.

Table 10-4: DOM Methods to Create Nodes

Method

Description

Example

createAttribute( name )

Creates an attribute for an element specified by the string name . Rarely used with existing (X)HTML elements since they have predefined attribute names that can be manipulated directly.

 myAlign = document.createAttribute 
("align");

createComment( string )

Creates an HTML/XML text comment of the form <!-- string --> where string is the comment content.

 myComment = document.createComment 
("Just a comment");

createDocumentFragment()

Creates a document fragment that is useful to hold a collection of nodes for processing.

 myFragment = document.createDocument 
Fragment();
myFragment.appendChild
(temp);

createElement( tagName )

Creates an element of the type specified by the string parameter tagName .

 myHeading = document.createElement 
("h1");

createTextNode( string )

Creates a text node containing string .

 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.




JavaScript 2.0
JavaScript: The Complete Reference, Second Edition
ISBN: 0072253576
EAN: 2147483647
Year: 2004
Pages: 209

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net