Node.replaceChild

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 É o novo elemento inserido. É 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

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

Veja também

• Node.removeChild