Node : méthode replaceChild()

Syntaxe

replaceChild(newChild, oldChild)

Paramètres

newChild

Le nouveau nœud qui remplace oldChild.

Attention : Si le nouveau nœud est déjà présent ailleurs dans le DOM, il est d'abord retiré de cette position.

oldChild

Le nœud enfant à remplacer.

Valeur de retour

L'objet Node remplacé. Il s'agit du même nœud que oldChild.

Exceptions

HierarchyRequestError DOMException

Levée lorsque les contraintes de l'arbre DOM sont violées, c'est-à-dire si l'un des cas suivants se produit :

• Si le parent de oldChild n'est pas un objet Document, un objet DocumentFragment ou un objet Element.
• Si le remplacement de oldChild par newChild entraîne un cycle, c'est-à-dire si newChild est un ancêtre du nœud.
• Si newChild n'est pas un objet DocumentFragment, un objet DocumentType, un objet Element, ou un objet CharacterData.
• Si le nœud actuel est un Text, et que son parent est un Document.
• Si le nœud actuel est un DocumentType et que son parent n'est pas un Document, car un doctype doit toujours être un descendant direct d'un document.
• Si le parent du nœud est un Document et que newChild est un DocumentFragment avec plus d'un enfant Element, ou qui a un enfant Text.
• Si le remplacement de oldChild par newChild entraîne un Document avec plus d'un Element comme enfant.
• Si le remplacement de oldChild par newChild entraîne la présence d'un nœud Element avant un nœud DocumentType.

NotFoundError DOMException

Levée si le parent de oldChild n'est pas le nœud actuel.

Exemples

// Étant donné que :
// <div>
//  <span id="spanEnfant">toto truc</span>
// </div>

// Crée un nœud d'élément vide
// sans ID, sans attributs et sans contenu
const sp1 = document.createElement("span");

// Donne un attribut id appelé "nouveauSpan"
sp1.id = "nouveauSpan";

// Crée du contenu pour le nouvel élément
const contenuSp1 = document.createTextNode(
  "nouvel élément span de remplacement.",
);

// Applique ce contenu au nouvel élément
sp1.appendChild(contenuSp1);

// Crée une référence au nœud existant à remplacer
const sp2 = document.getElementById("spanEnfant");
const divParent = sp2.parentNode;

// Remplace le nœud existant sp2 par le nouvel élément span sp1
divParent.replaceChild(sp1, sp2);

// Résultat :
// <div>
//   <span id="nouveauSpan">nouvel élément span de remplacement.</span>
// </div>

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété Node.removeChild
• La propriété Element.replaceWith