Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie ersetze ich DOM-Elemente direkt durch JavaScript?

Linda Hamilton
Freigeben: 2024-11-01 06:33:31
Original
469 Leute haben es durchsucht

How to Replace DOM Elements In-Place with JavaScript?

DOM-Elemente direkt durch JavaScript ersetzen

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 Das vorhandene DOM-Element soll die Methode replaceChild() verwenden. So würden Sie dies implementieren:

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

    <code class="javascript">var myAnchor = document.getElementById("myAnchor");
    var mySpan = document.createElement("span");</code>
    Nach dem Login kopieren
  2. Ändern Sie den Inhalt des neuen Elements:

    <code class="javascript">mySpan.innerHTML = "replaced anchor!";</code>
    Nach dem Login kopieren
  3. Ersetzen Sie das ursprüngliche Element durch das neue mit der Methode replaceChild() des parentNode:

    <code class="javascript">myAnchor.parentNode.replaceChild(mySpan, myAnchor);</code>
    Nach dem Login kopieren

Dieser Vorgang verläuft nahtlos Ersetzen Sie das Ankerelement () durch das Span-Element (), wobei die Position des Elements im DOM erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie ersetze ich DOM-Elemente direkt durch JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage