Mit csinál az insertAdjacentHTML() metódus a JavaScriptben

Ez az útmutató elmagyarázza a JavaScript „insertAdjacent HTML()” metódusának célját, működését és használatát.

Mit csinál az „insertAdjacentHTML()” metódus a JavaScriptben?

A ' insertAdjacentHTML() ” módszer segíti a felhasználókat a HTML kód beszúrásában egy adott pozícióba.

Szintaxis

A fenti szintaxisban:

• elem : A kapcsolódó HTML elemet jelöli.
• pozíció : Meghatározza egy HTML-elem négy relatív pozícióját, az alábbiak szerint:
• kezdés előtt : A HTML elem előtt.
• utókezdet : Közvetlenül a HTML elem első gyermeke után.
• utóvége : A HTML elem végén.
• előtte : A HTML elem utolsó gyermeke után.
• html : A beillesztett HTML elemre utal.

Példa: Az „insertAdjacentHTML()” alkalmazása a relatív pozíciókban lévő elemek beszúrására
Ez a példa a tárgyalt módszert alkalmazza az elemek beszúrására a négy meghatározott pozícióba egy adott elemhez képest, azaz: '

”.

---





---

HTML kód
Először menjen át a következő HTML-kódon:

< h2 > insertAdjacentHTML() metódus a JavaScriptben < / h2 >
< ul id = 'demó' >
< hogy > Linux < / hogy >
< / ul >

A fenti kódrészletben:




• Először hozzon létre egy alcímet a '

  ” címke.

• Ezután használja a „
  ” címke a rendezetlen lista létrehozásához hozzárendelt „demo” azonosítóval.
  • A ' “ címke összeadja a listában szereplő elemet.

  JavaScript kód
  Most lépjen tovább a JavaScript kódblokkra:

  < forgatókönyv >
  hadd soroljon fel = dokumentum. getElementById ( 'demó' ) ;
  lista. insertAdjacentHTML ( 'eleje előtt' , '

  Operációs rendszerek

  ' ) ;
  lista. insertAdjacentHTML ( 'afterbegin' , '
• Windows
' ) ;
lista. insertAdjacentHTML ( 'előtt' , '
• Mac OS
' ) ;
lista. insertAdjacentHTML ( 'utóvég' , '

Ennyi

' ) ;
forgatókönyv >

A fenti kódrészletben:

• Változó deklarálása ' lista ', amely a ' getElementById() 'módszer a mellékelt tartalmak lekéréséhez'
  ' elem, amely tartalmazza az azonosítót ' demó ”.
  • Ezután alkalmazza a „ insertAdjacentHTML() ” módszerrel beszúrhatja az alcímet a „

    ” címkén keresztül az „

    ” eleje elé, azaz a „ kezdés előtt ' pozíció.
    • Ezután helyezze be az elemet a „ ” címke az „
      ” címke eleje után, azaz a „ utókezdet ' pozíció.
      • Ismét használja a ' ' címkével egy listaelemet adjon hozzá az '
        ' címke vége előtt, azaz a ' előtte ' pozíció.
        • Végül szúrjon be egy bekezdést a „

          ” címke segítségével az „

          ” címke vége után a „ utóvége ' pozíció.

          Kimenet
          

          Amint látható, az összes definiált HTML-elem beszúrásra kerül a hozzárendelt helyre a „ insertAdjacentHTML() ” módszerrel.

          Következtetés

          A JavaScript jó hírű beépített ' insertAdjacentHTML() ” módszer a HTML elem négy különböző pozícióba történő hozzáfűzésére. Utasítja a böngészőt, hogy állítsa be a megadott HTML-elemet a ' kezdés előtt ”, „ előtte ”, „ utókezdet ', és a ' utóvége ” pozíciókat egy adott elemhez képest. Ez az útmutató részletesen tárgyalja az „insertAdjacentHTML()” metódus működését és használatát.