Sustituir un nodo por otro en el DOM mediante Javascript

Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como:

1. Identificar nodos del DOM
2. Crear nuevos nodos

Si tienes claros estos conceptos sigue leyendo. En caso contrario tal vez sería oportuno que vuelvas a las entradas enlazadas para repasar estos conceptos.

Existen muchos caminos para llegar a la misma solución.

Lo importante es que sepas solucionar el problema y más adelante ya perfeccionarás tus técnicas.

Una forma fácil de solucionar este problema es mediante el método

nodoPadre.replaceChild( nodoQueVasAIntroducir, nodoQueVaASerSustituido )

En caso de tener identificado el nodo que va a ser sustituido, entonces una práctica habitual es sustituir el nodoPadre por

nodoQueVaASerSustituido.parentNode

Veámoslo en una imagen sacada de brackets (generalmente uso Sublime pero recientemente he descubierto brackets. Algun día deberé hablar sobre herramientas para escribir código)

¡Hola querido lector!

Espero que esta entrada te haya sido útil.

¡Ahora intenta hacer tuyo el ejemplo y a practicar!