Método replaceChild() do Elemento HTML DOM

Definição e uso

replaceChild() O método substitui o nó filho com um novo nó.

Veja também:

Método removeChild()

Método remove()

Método appendChild()

Método insertBefore()

Propriedade childNodes

Propriedade firstChild

Propriedade lastChild

Propriedade firstElementChild

Propriedade lastElementChild

Métodos de documento relacionados:

Método createElement()

Método createTextNode()

Exemplo

Exemplo 1

Substitua o nó de texto com o novo nó no elemento <li>:

const newNode = document.createTextNode("Água");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

Antes da substituição:

  • Coffee
  • Tea
  • Milk

Após a substituição:

  • Water
  • Tea
  • Milk

Experimente você mesmo

Exemplo 2

Substitua o elemento <li> com um novo elemento <li>:

// Crie um novo elemento <li>:
const element = document.createElement("li");
// Crie um novo nó de texto:
const textNode = document.createTextNode("Water");
// Adicione o nó de texto ao elemento <li>:
element.appendChild(textNode);
// Obtenha o elemento <ul> com id="myList":
const list = document.getElementById("myList");
// Substitua o primeiro nó filho com um novo elemento <li>:
list.replaceChild(element, list.childNodes[0]);

Antes da substituição:

  • Coffee
  • Tea
  • Milk

Após a substituição:

  • Water
  • Tea
  • Milk

Experimente você mesmo

Sintaxe

node.replaceChild(newnode, oldnode)

Parâmetros

Parâmetros Descrição
newnode Obrigatório. O nó a ser inserido.
oldnode Obrigatório. O nó a ser removido.

Retorno

Tipo Descrição
Objeto Node Nó substituído.

Suporte do navegador

element.replaceChild() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte