Sustituir un nodo por otro en el DOM mediante Javascript

Sustituir un nodo por otro en el DOM mediante Javascript

Print Friendly, PDF & Email
Sustituir un nodo por otro en el DOM mediante Javascript
Valora esta entrada
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)

Reemplazar nodos DOM JS

¡Hola querido lector!

Espero que esta entrada te haya sido útil.

¡Ahora intenta hacer tuyo el ejemplo y a practicar!

Entradas relacionadas:

Validación de campos try catch finally en Javascript puro
- 340
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Como modificar el destino de todos los enlaces de una web con javascript
- 91
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Ejercicio JS – Salva pantallas primitivo con javascript
- 30
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 518
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 227
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como añadir nuevos nodos al DOM usando Javascript
- 350
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Ejercicio – Generación de un dado de 6 caras con javascript
- 82
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Ejercicio JS – Susto emergente
- 22
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
La apasionante historia del Javascript (resumida)
- 400
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Como llamar nodos del DOM mediante javascript
- 382
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.