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 julho de 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 dooldChild. 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
js
// <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>