element.replaceChild

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

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.

// <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>

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

• Node.removeChild