ZVON > References > DOM2 Reference
Intro / Search / ZVON
    DOM2 reference > Core: Node > appendChild [Go to standard]         [Glossary]  [Help]   

appendChild (method )

Owning interface and usage:  
Node.appendChild(newChild)

Member of these other interfaces:  
Attr, CDATASection, CharacterData, Comment, Document, DocumentFragment, DocumentType, Element, Entity, EntityReference, Notation, ProcessingInstruction, Text

Description:  
Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.

Parameters:  
Node newChild  -  The node to add. If it is a DocumentFragment object, the entire contents of the document fragment are moved into the child list of this node.

Returns:  
Node -  The node added.

Exceptions:  
DOMException HIERARCHY_REQUEST_ERR
Raised if this node is of a type that does not allow children of the type of the newChild node, or if the node to append is one of this node's ancestors or this node itself.
DOMException WRONG_DOCUMENT_ERR
Raised if newChild was created from a different document than the one that created this node.
DOMException NO_MODIFICATION_ALLOWED_ERR
Raised if this node is readonly or if the previous parent of the node being inserted is readonly.


Example:
Text in the first DIV.
Some text in the second DIV.
Some text and element in the third DIV.
We can try another elements. It will be much more interesting.
Text in the last DIV.
Source: 
   <div id="doc">
     <div>
       Text in the first DIV.
     </div>
     <div id="DDD" class="secondClass">
       Some text in the second DIV.
     </div>
     <div class="thirdClass">
       Some text and <span id="SSS">element</span> in the third DIV.
     </div>
     <div class="fourthClass">
       We can try <i>another elements</i>.
       It will be much more <b>interesting</b>.
     </div>
     <div>
       Text in the last DIV.
     </div>
   </div>
JavaScript: 
  var main = document.getElementById('doc');
  main.appendChild(main.childNodes[1]);
  var output = main.lastChild.firstChild.nodeValue;
Output:
desired your browser
white-spaces
preserved
by default 		Text in the first DIV.
white-spaces
not-preserved
by default 		Some text in the second DIV.