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 lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</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()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function insertarEnMedio() {
    let elemento = document.createElement('p')
    let nodotexto = document.createTextNode('Párrafo entre segundo y tercero')
    elemento.appendChild(nodotexto)
    let puntero = document.getElementById('p3')
    let 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:

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

Ahora obtenemos la referencia al tercer párrafo:

    let puntero = document.getElementById('p3')

y la referencia al div:

    let 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