Substituindo elementos DOM no local por JavaScript

Substituir um elemento no DOM pode ser uma técnica útil no desenvolvimento web. Por exemplo, se você tiver um elemento âncora () que deseja substituir por um elemento span (), poderá fazer isso usando JavaScript.

A abordagem mais eficaz para substituir um DOM O elemento em vigor é utilizar o método replaceChild(). Veja como você implementaria isso:

1. Obtenha uma referência para os elementos DOM:

   var myAnchor = document.getElementById("myAnchor");
   var mySpan = document.createElement("span");

2. Modifique o conteúdo do novo elemento:

   mySpan.innerHTML = "replaced anchor!";

3. Substitua o elemento original pelo novo usando o replaceChild() do parentNode método:

   myAnchor.parentNode.replaceChild(mySpan, myAnchor);

Este processo substituirá perfeitamente o elemento âncora () pelo span (), preservando a posição do elemento no DOM.