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

replaceChild (method )

Owning interface and usage:  
Node.replaceChild(newChild, oldChild)

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

Description:  
Replaces the child node oldChild with newChild in the list of children, and returns the oldChild node.

Parameters:  
Node newChild  -  The new node to put in the child list.
Node oldChild  -  The node being replaced in the list.

Returns:  
Node -  The node replaced.

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 put in 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 or the parent of the new node is readonly.
DOMException NOT_FOUND_ERR
Raised if oldChild is not a child of this node.

Note:  
If newChild is a DocumentFragment object, oldChild is replaced by all of the DocumentFragment children, which are inserted in the same order. If the newChild is already in the tree, it is first removed.


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 elem = document.getElementById('DDD');
  elem.replaceChild(document.getElementById('SSS').firstChild, elem.firstChild);
  var output = elem.firstChild.nodeValue;
Output:
desired your browser
element