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 remplaceraoldChild
. 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 queoldChild
.
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 !
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 ou moins) | IE6 (Maybe Earlier) | (Oui) | 1.0 | (Oui) |
Fonctionnalité | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Edge Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | (Oui) | 1.0 (1) | IE6 (Maybe Earlier) | (Oui) | 1.0 | (Oui) | 1.0 |