Was macht die Methode insertAdjacentHTML() in JavaScript?

Diese Anleitung erklärt das Ziel, die Funktionsweise und die Verwendung der Methode „insertAdjacent HTML()“ in JavaScript.

Was macht die Methode „insertAdjacentHTML()“ in JavaScript?

Der ' insertAdjacentHTML() “-Methode hilft den Benutzern, den HTML-Code an einer bestimmten Position einzufügen.

Syntax

In der obigen Syntax:

• Element : Es repräsentiert das zugehörige HTML-Element.
• Position : Es gibt die vier relativen Positionen eines HTML-Elements wie folgt an:
• bevor beginnen : Vor dem HTML-Element.
• Nachbeginn : Direkt nach dem ersten untergeordneten Element des HTML-Elements.
• nach ende : Am Ende des HTML-Elements.
• vorende : Nach dem letzten untergeordneten Element des HTML-Elements.
• html : Es bezieht sich auf das eingefügte HTML-Element.

Beispiel: Anwenden von „insertAdjacentHTML()“ zum Einfügen von Elementen an relativen Positionen
Dieses Beispiel wendet das diskutierte Verfahren an, um die Elemente an den vier spezifischen Positionen in Bezug auf ein bestimmtes Element einzufügen, d. h. „

“.

---





---

HTML Quelltext
Gehen Sie zunächst den folgenden HTML-Code durch:

< h2 > insertAdjacentHTML()-Methode in JavaScript < / h2 >
< Ul Ausweis = 'Demo' >
< Das > Linux < / Das >
< / Ul >

Im obigen Code-Snippet:




• Erstellen Sie zunächst eine Unterüberschrift mit dem „

  ' Schild.

• Als nächstes verwenden Sie die „
  ”-Tag, um die ungeordnete Liste mit einer zugewiesenen ID “demo” zu erstellen.
  • Der ' “-Tag fügt das angegebene Element in der Liste hinzu.

  JavaScript-Code
  Fahren Sie nun mit dem JavaScript-Codeblock fort:

  < Skript >
  Liste lassen = dokumentieren. getElementById ( 'Demo' ) ;
  Liste. InsertAdjacentHTML ( 'vor Beginn' , '

  Betriebssysteme

  ' ) ;
  Liste. InsertAdjacentHTML ( 'Nachbeginn' , '
• Fenster
' ) ;
Liste. InsertAdjacentHTML ( 'vorher' , '
• Mac OS
' ) ;
Liste. InsertAdjacentHTML ( 'nach ende' , '

Das ist alles

' ) ;
Skript >

Im obigen Code-Snippet:

• Deklarieren Sie eine Variable „ Liste ” das nutzt die “ getElementById() ” Methode zum Abrufen der enthaltenen “
  ” Element, das die ID enthält “ Demo “.
  • Wenden Sie als Nächstes das „ insertAdjacentHTML() “-Methode, um die Unterüberschrift über das „

    “-Tag vor dem Beginn des „

    “ einzufügen, d. h. am „ bevor beginnen ” Stellung.
    • Fügen Sie danach den Artikel über das „ “-Tag nach dem Beginn des „
      “-Tags, d. h. am „ Nachbeginn ” Stellung.
      • Verwenden Sie erneut das ” “-Tag, um ein Listenelement vor dem Ende des „
        “-Tags hinzuzufügen, d. h. am „ vorende ” Stellung.
        • Zuletzt fügen Sie mit Hilfe des „

          “-Tags nach dem Ende des „

          “-Tags am „ nach ende ” Stellung.

          Ausgang
          

          Wie zu sehen, werden alle definierten HTML-Elemente mit Hilfe des „ insertAdjacentHTML() ' Methode.

          Abschluss

          JavaScript bietet ein bekanntes integriertes „ insertAdjacentHTML() ”-Methode zum Anhängen des HTML-Elements an vier verschiedenen Positionen. Es weist den Browser an, das angegebene HTML-Element bei „ bevor beginnen “, „ vorende “, „ Nachbeginn ', und das ' nach ende ” Positionen in Bezug auf ein bestimmtes Element. In diesem Leitfaden wurde die Funktionsweise und Verwendung der Methode „insertAdjacentHTML()“ im Detail erläutert.