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.

// Étant donné que :
// <div>
//   <span id="childSpan">foo bar</span>
// </div>

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

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

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

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

// Construit une référence au nœud existant à remplacer
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

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

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

• Node.removeChild
• ChildNode.replaceWith