Sustituir un nodo por otro en el DOM mediante Javascript

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Reemplazar nodos DOM JS

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.

Ejemplo de uso de .replaceChild()

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)

Sustituir un nodo por otro en el DOM mediante Javascript 1
¡Hola querido lector!

Espero que esta entrada te haya sido útil.

¡Ahora intenta hacer tuyo el ejemplo y a practicar!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *