Node.replaceChild()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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>

Especificación

Ver también