element.replaceChild

La méthode Node.replaceChild() remplace un nœud enfant du noeud spécifié par un autre nœud.

Syntaxe

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild est le nouveau nœud qui remplacera oldChild. S'il existe déjà dans le DOM, il sera d'abord enlevé.
• oldChild est le nœud existant à remplacer.
• replaceNode est le nœud remplacé. C'est le même nœud que oldChild.

Exemple

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// crée un noeud élément vide
// sans ID, aucun attribut ni contenu
var sp1 = document.createElement("span");

// lui donne un attribut id appelé 'newSpan'
sp1.id = "newSpan";

// crée un contenu pour le nouvel élément.
var sp1_content = document.createTextNode("new replacement span element.");

// applique ce contenu au nouvel élément
sp1.appendChild(sp1_content);

// construit une référence au noeud existant devant être remplacé
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// remplace le noeud existant sp2 avec le nouvel élément span sp1
parentDiv.replaceChild(sp1, sp2);

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

Spécifications

• DOM Level 1 Core: replaceChild
• DOM Level 2 Core : replaceChild — traduction en français (non normative)
• DOM Level 3 Core: replaceChild

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Voir aussi

• Node.removeChild