Node.replaceChild()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.
El método Node.replaceChild() reemplaza un nodo hijo del elemento especificado por otro.
Sintáxis
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChildes el nuevo nodo con el que reemplazaroldChild. Si ya existe en el DOM, será eliminado previamente.oldChildes el nodo existente para ser reemplazado.replacedNodees el nodo reemplazado. Es el mismo nodo queoldChild.
Ejemplo
js
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// crear un nodo con un elemento vacío
// sin ID, atributos, ni contenido
var sp1 = document.createElement("span");
// darle un atributo id llamado 'newSpan'
sp1.setAttribute("id", "newSpan");
// crear algún contenido para el nuevo elemento
var sp1_content = document.createTextNode(
"Nuevo elemento span para reemplazo.",
);
// aplicar dicho contenido al nuevo elemento
sp1.appendChild(sp1_content);
// construir una referencia al nodo existente que va a ser reemplazado
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// reemplazar el nodo sp2 existente con el nuevo elemento span sp1
parentDiv.replaceChild(sp1, sp2);
// resultado:
// <div>
// <span id="newSpan">Nuevo elemento span para reemplazo.</span>
// </div>