Ersetzen von DOM-Elementen vor Ort durch JavaScript

Das Ersetzen eines Elements im DOM kann eine nützliche Technik in der Webentwicklung sein. Wenn Sie beispielsweise ein Ankerelement () durch ein Span-Element () ersetzen möchten, können Sie dies mit JavaScript tun.

Der effektivste Ansatz zum Ersetzen eines DOM Das vorhandene Element besteht darin, die Methode replaceChild() zu verwenden. So würden Sie dies implementieren:

1. Erhalten Sie einen Verweis auf die DOM-Elemente:

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

2. Ändern Sie den Inhalt des neuen Elements:

   mySpan.innerHTML = "replaced anchor!";

3. Ersetzen Sie das ursprüngliche Element durch das neue, indem Sie die Funktion „replaceChild()“ des parentNode verwenden. Methode:

   myAnchor.parentNode.replaceChild(mySpan, myAnchor);

Dieser Prozess ersetzt nahtlos das Ankerelement () durch die Spanne ()-Element, wobei die Position des Elements im DOM erhalten bleibt.