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

insertBefore (method )

Owning interface and usage:  
Node.insertBefore(newChild, refChild)

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

Description:  
Inserts the node newChild before the existing child node refChild. If refChild is null, insert newChild at the end of the list of children.

Parameters:  
Node newChild  -  The node to insert.
Node refChild  -  The reference node, i.e., the node before which the new node must be inserted.

Returns:  
Node -  The node being inserted.

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 insert 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 parent of the node being inserted is readonly.
DOMException NOT_FOUND_ERR
Raised if refChild is not a child of this node.

Note:  
If newChild is a DocumentFragment object, all of its children are inserted, in the same order, before refChild. 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 main = document.getElementById('doc');
  main.insertBefore(document.getElementById('DDD'), main.firstChild);
  var output = main.firstChild.firstChild.nodeValue;
Output:
desired your browser
Some text in the second DIV.