Node.insertBefore()

Syntax

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

En mozilla Firefox, si referenceElement es null, newElement se inserta al final the la lista de nodos hijos o child nodes. En Internet Explorer, un valor undefined como referenceElement, lanzará una excepción "Invalid argument", mientras que en Chrome lanzara un "Uncaught TypeError" pues espera ambos argumentos.

• insertedElement El nodo que esta siendo insertado, o sea newElement
• parentElement El padre del nodo recien insertado.
• newElement El nodo a insertar.
• referenceElement El nodo antes del cual se inserta newElement.

Example

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// Creamos un nuevo, elemento <span>
var sp1 = document.createElement("span");

// Obtenemos la referencia al elemento, antes de insertarlo 
var sp2 = document.getElementById("childElement");
// Obten la referencia al elemento padre
var parentDiv = sp2.parentNode;

// Insertamos el nuevo elemento en el DOM antes de sp2
parentDiv.insertBefore(sp1, sp2);
</script>

No existe el método insertAfter.  Puede ser emulado mediante la combinacion de el método insertBefore con nextSibling.

En el ejemplo anterior, sp1 podría ser insertado después de sp2 usando:

parentDiv.insertBefore(sp1, sp2.nextSibling);

Si sp2 no tiene ningún hermano hermano depués de el, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos (inmediatamente después de sp2).

Example 2

Insertar un elemento antes del primer elemento hijo, usando la propiedad firstChild.

// Obtenemos la referencia del elemento al cual queremos insertar el nuevo nodo 
var parentElement = document.getElementById('parentElement');
// Obtenemos la referencia al primer hijo
var theFirstChild = parentElement.firstChild;

// Creamos el nuevo elemento
var newElement = document.createElement("div");

// Insertamos el nuevo elemento antés del primer hijo
parentElement.insertBefore(newElement, theFirstChild);

Cuando el elemento no tiene primer hijo, entonces firstChild es null. El elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Así pues, el nuevo elemento es el único elemento despues de ser insertado.

Browser compatibility

Specification

• insertBefore