Ce face metoda insertAdjacentHTML() în JavaScript

Acest ghid explică obiectivul, funcționarea și utilizarea metodei „insertAdjacent HTML()” în JavaScript.

Ce face metoda „insertAdjacentHTML()” în JavaScript?

„ insertAdjacentHTML() ” metoda ajută utilizatorii să insereze codul HTML într-o anumită poziție.

Sintaxă

În sintaxa de mai sus:

• element : Reprezintă elementul HTML asociat.
• poziţie : Specifică cele patru poziții relative ale unui element HTML, după cum urmează:
• înainte de a începe : Înainte de elementul HTML.
• după început : Imediat după primul element secundar al elementului HTML.
• după sfârșit : La sfârșitul elementului HTML.
• înainte de sfârşit : După ultimul copil al elementului HTML.
• html : Se referă la elementul HTML inserat.

Exemplu: aplicarea „insertAdjacentHTML()” la inserarea elementelor în poziții relative
Acest exemplu aplică metoda discutată pentru a insera elementele în cele patru poziții specifice în raport cu un anumit element, adică „

”.

---





---

Cod HTML
Mai întâi, parcurgeți următorul cod HTML:

< h2 > Metoda insertAdjacentHTML() în JavaScript < / h2 >
< ul id = 'demo' >
< acea > Linux < / acea >
< / ul >

În fragmentul de cod de mai sus:




• În primul rând, creați un subtitlu folosind „

  ' etichetă.

• Apoi, utilizați „
  ” pentru a crea lista neordonată cu un ID atribuit „demo”.
  • „ „ Eticheta adaugă elementul menționat în listă.

  Cod JavaScript
  Acum, treceți la blocul de cod JavaScript:

  < scenariu >
  lasa lista = document. getElementById ( 'demo' ) ;
  listă. insertAdjacentHTML ( 'inainte de a incepe' , „

  Sisteme de operare

  ” ) ;
  listă. insertAdjacentHTML ( „după început” , „
• Windows
” ) ;
listă. insertAdjacentHTML ( „înainte” , „
• Mac OS
” ) ;
listă. insertAdjacentHTML ( „după sfârşit” , „

Asta e tot

” ) ;
scenariu >

În fragmentul de cod de mai sus:

• Declarați o variabilă „ listă ' care utilizează ' getElementById() ” metoda de a prelua „
  „element care cuprinde id-ul „ demonstrație ”.
  • Apoi, aplicați „ insertAdjacentHTML() ” pentru a introduce subtitlul prin intermediul etichetei „

    ” înainte de începerea „

    ”, adică la „ înainte de a începe ” poziție.
    • După aceea, introduceți elementul prin intermediul „ ” după începutul etichetei „
      ”, adică la eticheta „ după început ” poziție.
      • Din nou, folosiți ” „ etichetă pentru a adăuga un element din listă înainte de sfârșitul etichetei „
        ”, adică la „ înainte de sfârşit ” poziție.
        • În cele din urmă, introduceți un paragraf cu ajutorul etichetei „

          ” după sfârșitul etichetei „

          ” la „ după sfârșit ” poziție.

          Ieșire
          

          După cum s-a văzut, toate elementele HTML definite sunt inserate în poziția lor atribuită cu ajutorul „ insertAdjacentHTML() ” metoda.

          Concluzie

          JavaScript oferă un bine reputat încorporat „ insertAdjacentHTML() ” metoda de adăugare a elementului HTML în patru poziții diferite. Acesta indică browserului să ajusteze elementul HTML declarat la „ înainte de a începe ”, “ înainte de sfârşit ”, “ după început ', si ' după sfârșit ” poziții față de un anumit element. Acest ghid a discutat în detaliu modul de lucru și utilizarea metodei „insertAdjacentHTML()”.