▼  Methods that help to add and remove nodes.
Every TABLE element requires a TBODY element
MethodDescriptionExample
appendChild() Append a node to another node as its last child node.
If the element is already in the document,
it is removed from it previous position.
Use insertBefore() to append a node in another position
than as the last child.
x.appendChild(y)
Append node y as the last child of node x.
cloneNode() Clone a node.
If an argument of true is passed,
its descendants are also cloned.
If an argument of false is given,
no descendent nodes are cloned.
var x = y.cloneNode(true)
Clone node y, including its children,
and temporarily store the clone in x.
createDocumentFragment() Create a doc frage to which all new nodes are attached following which the frag is attached to the document var oFragment = document.createDocumentFragment();
for (var i=0; i var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
createElement() Create a new element.
var x = document.createElement('p')
Create a new <p> tag and temporarily store it in x.
(Later, x can be added to the node tree.)
createTextNode() Create a new text node.
var x = document.createTextNode('text')
Create a new text node with value "text" and temporarily store it in x.
(Later, x can be added to the node tree.)
insertBefore() Insert a node into the document tree
as a child node,
before the existing child node specified.
x.insertBefore(y,z)
Insert node y into the document as a child node of node x,
just before node z.
removeChild() Remove a child node from the node tree.
x.removeChild(y)
Remove child node y of node x.
replaceChild() Replace a child node with another node.
x.replaceChild(y,z)
Replace node z, a child node of x, by node y.
 ▼ DOM Properties that can be used for navigating the tree.


The W3C DOM offers Web developers access to all elements in an HTML page.
Thus it is the most complete DOM available.

<p id="w3cdomtest">
The <a href="http://www.w3.org/DOM/">W3C DOM</a> offers Web developers access to <em>all elements</em> in an HTML page. Thus it is the most complete DOM available.
</p>
PropertyDescription Example ( x is the <a> element above )
childNodes[] Returns an array with all child noes of the element. x.childNodes[ 0 ] is the text child node "W3C DOM".
firstChild Accesses the first child of the element, in document order. x.firstChild is also the text node "W3C DOM".
lastChild Accesses the last child of the element, in document order. x.lastChild is once again the text node "W3C DOM", since x doesn't have any children.
nextSibling Access the next sibling of the element in document order. x.nextSibling is the text node "offers...to".
previousSibling Accesses the previous sibling of the element, in document order. x.previousSibling is the text node "The"
parentNode Accesses the parent of the element. x.parentNode is the <p> element.
 ▼  Information about nodes.
PropertyRead/WriteDescription
className read/write Accesses the class attribute of an HTML element node.
id read/write Accesses the id attribute of an HTML element node.
nodeType read-only Provides the type of a node.
var x = y.nodeType
x takes a numeric value depending on the node type of y.
For example, x=1 if y is an element node,
x=2 if y is an attribute,
and x=3 if y is a text node.
nodeValue read/write Accesses the value of an attribute node or a text node.
var x = y.nodeValue
If y is a text node, x contains the text.
If y is an attribute node, x contains the value of the attribute.
x.nodeValue = 'New value'
Sets the value of node x.
tagName read-only Provides the tag name of an element node. var x = y.tagName:
x is now the tag name of node y.
(For example, 'P' or 'A').
title read/write Accesses the title attribute of a node. x.title = 'New title':
Sets the title of node x.
This new title is immediately visible when the mouse hovers over node x.
MethodDescription
getAttribute() Gets the value of an attribute.
x.getAttribute('align')
Gets the value of the align attribute of node x.
hasChildNodes() Tells us whether the node has child nodes.
var x = y.hasChildNodes():
If node y has child nodes then x becomes true;
if it hasn't, then x becomes false.
 ▲  ▼