Metodo replaceChild() dell'elemento HTML DOM Element

Definizione e uso

replaceChild() Il metodo sostituisce un nodo figlio con un nuovo nodo.

Vedi anche:

Metodo removeChild()

Metodo remove()

Metodo appendChild()

Metodo insertBefore()

Proprietà childNodes

Proprietà firstChild

Proprietà lastChild

Proprietà firstElementChild

Proprietà lastElementChild

Metodi document relativi:

Metodo createElement()

Metodo createTextNode()

Esempio

Esempio 1

Sostituisci il nodo di testo con un nuovo nodo di testo all'interno dell'elemento <li>:

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

Prima della sostituzione:

  • Coffee
  • Tea
  • Milk

Dopo la sostituzione:

  • Water
  • Tea
  • Milk

Prova da solo

Esempio 2

Sostituisci l'elemento <li> con un nuovo <li> elemento:

// Crea un nuovo elemento <li>:
const element = document.createElement("li");
// Crea un nuovo nodo di testo:
const textNode = document.createTextNode("Water");
// Aggiungi il nodo di testo al <li> elemento:
element.appendChild(textNode);
// Ottieni l'elemento <ul> con id="myList":
const list = document.getElementById("myList");
// Sostituisci il primo nodo figlio con un nuovo <li> elemento:
list.replaceChild(element, list.childNodes[0]);

Prima della sostituzione:

  • Coffee
  • Tea
  • Milk

Dopo la sostituzione:

  • Water
  • Tea
  • Milk

Prova da solo

Sintassi

node.replaceChild(newnode, oldnode)

Parametro

Parametro Descrizione
newnode Obbligatorio. Nodo da inserire.
oldnode Obbligatorio. Nodo da eliminare.

Valore di ritorno

Tipo Descrizione
Oggetto Node Nodo sostituito.

Supporto del browser

element.replaceChild() È una caratteristica di DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

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