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.

Sumário

Substitui o elemento filho especificado por outro.

Sintaxe

replacedNode = parentNode.replaceChild(newChild, oldChild);

newChild é o novo elemento que será inserido no lugar do oldChild. Se já existir no DOM, será removido primeiro para depois ser inserido.
oldChild é o elemento existente que será substituído.
replacedNode é elemento substituído. É o mesmo elemento que oldChild.

Exemplo

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// Cria um novo elemento vazio
// sem ID, atributos ou conteúdo
var sp1 = document.createElement("span");

// Adiciona um ID 'newSpan' para o elemento
sp1.setAttribute("id", "newSpan");

// Adiciona contéudo para o elemento
var sp1_content = document.createTextNode("new replacement span element.");

// Coloca o conteúdo no elemento
sp1.appendChild(sp1_content);

// Procura o elemento que será substituído
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// Substituí o elemento que já existe (sp2) por o novo elemento (sp1)
parentDiv.replaceChild(sp1, sp2);

// resultado:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

Especificação

Veja também

Node.removeChild