Node.replaceChild()

El método Node.replaceChild() reemplaza un nodo hijo del elemento especificado por otro.

Sintáxis

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild es el nuevo nodo con el que reemplazar oldChild. Si ya existe en el DOM, será eliminado previamente.
• oldChild es el nodo existente para ser reemplazado.
• replacedNode es el nodo reemplazado. Es el mismo nodo que oldChild.

Ejemplo

// <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> 

Especificación

• DOM Level 1 Core: replaceChild
• DOM Level 2 Core: replaceChild
• DOM Level 3 Core: replaceChild

Ver también

• Node.removeChild