Méthode replaceChild() de l'élément HTML DOM

Définition et utilisation

replaceChild() La méthode remplace le nœud enfant par un nouveau nœud.

Veuillez également consulter :

Méthode removeChild()

Méthode remove()

Méthode appendChild()

Méthode insertBefore()

Propriété childNodes

Propriété firstChild

Propriété lastChild

Propriété firstElementChild

Propriété lastElementChild

Méthodes de document associées :

Méthode createElement()

Méthode createTextNode()

Exemple

Exemple 1

Remplacer le nœud de texte existant par un nœud de texte nouveau dans l'élément <li> :

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

list.replaceChild(element, list.childNodes[0]);

  • Avant le remplacement :
  • Thé
  • Milk

Après le remplacement :

  • Eau
  • Thé
  • Milk

Essayez-le vous-même

Exemple 2

Remplacez l'élément <li> par un nouveau <li> :

// Créer un nouveau <li> :
const element = document.createElement("li");
// Créer un nouveau nœud texte :
const textNode = document.createTextNode("Eau");
// Ajouter le nœud texte à l'élément <li> :
element.appendChild(textNode);
// Obtenir l'élément <ul> avec id="myList" :
const list = document.getElementById("myList");
// Obtenir l'élément <ul> avec id="myList" :
// Remplacez le premier enfant avec un nouveau <li> :

list.replaceChild(element, list.childNodes[0]);

  • Avant le remplacement :
  • Thé
  • Milk

Après le remplacement :

  • Eau
  • Thé
  • Milk

Essayez-le vous-même

Syntaxe

node.replaceChild(newnode, oldnode)

Paramètres

Paramètres Description
newnode Obligatoire. Le nœud à insérer.
oldnode Obligatoire. Le nœud à supprimer.

Valeur de retour

Type Description
Objet Node Nœud remplacé.

Support du navigateur

Méthode replaceChild() de l'élément C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

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