14 - Agregar un nodo de tipo elemento en medio (insertBefore - createElement)


En caso que necesitemos agregar un nodo entre varios que se encuentran en el mismo nivel, el método appendChild no nos servirá. Para estos casos tenemos el método insertBefore que inserta un nodo previo a otro que le pasamos como referencia en el segundo parámetro.

Supongamos que tenemos cinco párrafos todos contenidos en un div y necesitamos insertar otro párrafo entre el segundo y el tercero. Para resolver este problema debemos obtener la referencia del tercer párrafo y la del div donde se insertará nuestro nuevo párrafo.
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="parrafos">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p id="p3">Este es el tercer párrafo</p>
<p>Este es el cuarto párrafo</p>
<p>Este es el quinto párrafo</p>
</div>
<input type="button" value="insertar otro párrafo entre el segundo y el tercero" onClick="insertarEnMedio()">
</body>
</html>

funciones.js

function insertarEnMedio()
{
  var elemento=document.createElement('p');
  var nodotexto=document.createTextNode('Párrafo entre segundo y tercero');
  elemento.appendChild(nodotexto);
  var puntero=document.getElementById('p3');
  var pa=document.getElementById('parrafos');
  pa.insertBefore(elemento,puntero); 
}

Lo primero es crear nuestro párrafo y un nodo texto que se lo añadimos al nodo elemento:

  var elemento=document.createElement('p');
  var nodotexto=document.createTextNode('Párrafo entre segundo y tercero');
  elemento.appendChild(nodotexto);

Ahora obtenemos la referencia al tercer párrafo:

  var puntero=document.getElementById('p3');

y la referencia al div:

  var pa=document.getElementById('parrafos');

Por último llamamos al método insertBefore a partir de la referencia del div y le pasamos como parámetro el nodo a insertar y el nodo previo a donde se debe insertar:

  pa.insertBefore(elemento,puntero); 

Retornar