ZVON > References > DOM1 Reference
Intro / Search / ZVON
   [Back] [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.
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.


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.