Cómo reemplazar un elemento DOM

Dado un elemento DOM, ¿cómo lo reemplazas por otro?

Digamos que tienes un elemento DOM, al cual tienes una referencia (quizás recuperada usando querySelector()).

Para reemplazarlo con otro elemento DOM, puede llamar al replaceWith()método en el primer elemento, pasando el segundo elemento como argumento:

const el1 = document.querySelector(/* ... */)const el2 = document.querySelector(/* ... */)el1.replaceWith(el2)

Dado que Edge 17 e IE11 no lo admiten , debes transpilarlo a ES5 usando Babel si planeas admitir esos navegadores.

Otra solución es buscar el padre y utilizar el replaceChild()método, que es mucho más antiguo y compatible con todos los navegadores:

const el1 = document.querySelector(/* ... */)const el2 = document.querySelector(/* ... */)el1.parentNode.replaceChild(el2, el1)

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo reemplazar un elemento DOM

Digamos que tienes un elemento DOM, al cual tienes una referencia (quizás recuperada usando querySelector()). Dado un elemento DOM, ¿cómo lo reemplazas por

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente