Ano ang ginagawa ng insertAdjacentHTML() Method sa JavaScript

Ipinapaliwanag ng gabay na ito ang layunin, paggawa, at paggamit ng pamamaraang “insertAdjacent HTML()” sa JavaScript.

Ano ang ginagawa ng Paraang 'insertAdjacentHTML()' sa JavaScript?

Ang ' insertAdjacentHTML() ” paraan ay tumutulong sa mga gumagamit na ipasok ang HTML code sa isang partikular na posisyon.

Syntax

Sa itaas na syntax:

• elemento : Kinakatawan nito ang nauugnay na elemento ng HTML.
• posisyon : Tinutukoy nito ang apat na kamag-anak na posisyon ng isang elemento ng HTML, tulad ng sumusunod:
• bago magsimula : Bago ang elemento ng HTML.
• pagkatapos magsimula : Pagkatapos mismo ng unang anak ng elemento ng HTML.
• pagkatapos : Sa dulo ng HTML element.
• bago matapos : Pagkatapos ng huling anak ng elemento ng HTML.
• html : Ito ay tumutukoy sa ipinasok na elemento ng HTML.

Halimbawa: Paglalapat ng “insertAdjacentHTML()” sa Pagpasok ng Mga Elemento Sa Mga Kaugnay na Posisyon
Inilalapat ng halimbawang ito ang tinalakay na paraan upang ipasok ang mga elemento sa apat na partikular na posisyon na may paggalang sa isang partikular na elemento i.e., '

”.

---





---

HTML Code
Una, dumaan sa sumusunod na HTML code:

< h2 > insertAdjacentHTML() Method sa JavaScript < / h2 >
< ul id = 'demo' >
< na > Linux < / na >
< / ul >

Sa snippet ng code sa itaas:




• Una, gumawa ng subheading gamit ang “

  ” tag.

• Susunod, gamitin ang '
  ” tag para gawin ang hindi nakaayos na listahan na may nakatalagang id na “demo”.
  • Ang ' ' idinaragdag ng tag ang nakasaad na item sa listahan.

  JavaScript Code
  Ngayon, lumipat sa block ng JavaScript code:

  < script >
  hayaan mong ilista = dokumento. getElementById ( 'demo' ) ;
  listahan. insertAdjacentHTML ( 'bago magsimula' , '

  Mga Operating System

  ' ) ;
  listahan. insertAdjacentHTML ( 'pagkatapos magsimula' , '
• Windows
' ) ;
listahan. insertAdjacentHTML ( 'bago' , '
• Mac OS
' ) ;
listahan. insertAdjacentHTML ( 'pagkatapos' , '

Iyon lang

' ) ;
script >

Sa snippet ng code sa itaas:

• Ipahayag ang isang variable ' listahan 'na gumagamit ng' getElementById() 'paraan para kunin ang kasama'
  'elemento na binubuo ng id' demo ”.
  • Susunod, ilapat ang ' insertAdjacentHTML() ” paraan upang ipasok ang subheading sa pamamagitan ng tag na “

    ” bago magsimula ang “

    ” ibig sabihin, sa “ bago magsimula ” posisyon.
    • Pagkatapos nito, ipasok ang item sa pamamagitan ng ' ” tag pagkatapos ng simula ng “
      ” tag ibig sabihin, sa “ pagkatapos magsimula ” posisyon.
      • Muli, gamitin ang ' ' tag upang magdagdag ng isang item sa listahan bago ang katapusan ng tag na '
        ' ibig sabihin, sa ' bago matapos ” posisyon.
        • Panghuli, maglagay ng talata sa tulong ng tag na “

          ” pagkatapos ng dulo ng tag na “

          ” sa “ pagkatapos ” posisyon.

          Output
          

          Tulad ng nakikita, ang lahat ng tinukoy na elemento ng HTML ay ipinasok sa kanilang itinalagang posisyon sa tulong ng ' insertAdjacentHTML() ” paraan.

          Konklusyon

          Nagbibigay ang JavaScript ng isang kilalang built-in na ' insertAdjacentHTML() ” paraan para sa pagdaragdag ng HTML element sa apat na magkakaibang posisyon. Inutusan nito ang browser na ayusin ang nakasaad na elemento ng HTML sa “ bago magsimula ”, “ bago matapos ”, “ pagkatapos magsimula ', at ang ' pagkatapos ” mga posisyon na may paggalang sa isang partikular na elemento. Tinalakay ng gabay na ito ang pagtatrabaho at paggamit ng pamamaraang “insertAdjacentHTML()” nang detalyado.