Método replaceChild() del elemento HTML DOM

Definición y uso

replaceChild() El método reemplaza el nodo hijo con un nuevo nodo.

Vea también:

Método removeChild()

Método remove()

Método appendChild()

Método insertBefore()

Atributo childNodes

Atributo firstChild

Atributo lastChild

Atributo firstElementChild

Atributo lastElementChild

Métodos de documentación relacionados:

Método createElement()

Método createTextNode()

Ejemplo

Ejemplo 1

Reemplace el nodo de texto en el elemento <li> con un nuevo nodo de texto:

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

Antes de reemplazar:

  • Café
  • Té
  • Leche

Después de reemplazar:

  • Agua
  • Té
  • Leche

Prueba personalmente

Ejemplo 2

Reemplazar el elemento <li> con un nuevo elemento <li>:

// Crear un nuevo elemento <li>:
const element = document.createElement("li");
// Crear un nuevo nodo de texto:
const textNode = document.createTextNode("Agua");
// Añadir el nodo de texto al elemento <li>:
element.appendChild(textNode);
// Obtener el elemento <ul> con id="myList":
const list = document.getElementById("myList");
// Reemplazar el primer nodo hijo con un nuevo elemento <li>:
list.replaceChild(element, list.childNodes[0]);

Antes de reemplazar:

  • Café
  • Té
  • Leche

Después de reemplazar:

  • Agua
  • Té
  • Leche

Prueba personalmente

Sintaxis

node.replaceChild(newnode, oldnode)

Parámetros

Parámetros Descripción
newnode Requerido. Nodo a insertar.
oldnode Requerido. Nodo a eliminar.

Valor devuelto

Tipo Descripción
Objeto Nodo Nodo reemplazado.

Compatibilidad del navegador

element.replaceChild() Es una característica del Nivel 1 de DOM (1998).

Todos los navegadores lo soportan completamente:

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