Mitä insertAdjacentHTML()-menetelmä tekee JavaScriptissä

Tämä opas selittää JavaScriptin 'insertAdjacent HTML()' -menetelmän tavoitteen, toiminnan ja käytön.

Mitä 'insertAdjacentHTML()' -menetelmä tekee JavaScriptissä?

' insertAdjacentHTML() ” -menetelmä auttaa käyttäjiä lisäämään HTML-koodin tiettyyn kohtaan.

Syntaksi

Yllä olevassa syntaksissa:

• elementti : Se edustaa siihen liittyvää HTML-elementtiä.
• asema : Se määrittää HTML-elementin neljä suhteellista sijaintia seuraavasti:
• ennen alkua : Ennen HTML-elementtiä.
• jälkialusta : Heti HTML-elementin ensimmäisen lapsen jälkeen.
• jälkikäteen : HTML-elementin lopussa.
• ennen loppua : HTML-elementin viimeisen alatason jälkeen.
• html : Se viittaa lisättyyn HTML-elementtiin.

Esimerkki: 'insertAdjacentHTML()':n käyttäminen elementtien lisäämiseen suhteellisissa paikoissa
Tässä esimerkissä käytetään käsiteltyä menetelmää elementtien lisäämiseksi neljään tiettyyn kohtaan suhteessa tiettyyn elementtiin, eli '

”.

---





---

HTML-koodi
Käy ensin läpi seuraava HTML-koodi:

< h2 > insertAdjacentHTML() -menetelmä JavaScriptissä < / h2 >
< ul id = 'demo' >
< että > Linux < / että >
< / ul >

Yllä olevassa koodinpätkässä:




• Luo ensin alaotsikko käyttämällä '

  ' -tunniste.

• Käytä seuraavaksi '
  ” -tagi luodaksesi järjestämättömän luettelon, jolla on määritetty tunnus 'demo'.
  • ' ' -tunniste lisää luettelossa mainitun kohteen.

  JavaScript-koodi
  Siirry nyt JavaScript-koodilohkoon:

  < käsikirjoitus >
  anna listata = asiakirja. getElementById ( 'demo' ) ;
  lista. insertAdjacentHTML ( 'ennen alkua' , '

  Käyttöjärjestelmät

  ' ) ;
  lista. insertAdjacentHTML ( 'afterbegin' ,
• Windows
) ;
lista. insertAdjacentHTML ( 'ennen' , '
• Mac OS
' ) ;
lista. insertAdjacentHTML ( 'jälkeläinen' , '

Siinä kaikki

' ) ;
käsikirjoitus >

Yllä olevassa koodinpätkässä:

• Ilmoita muuttuja ' lista ', joka käyttää ' getElementById() 'tapa noutaa mukana'
  'elementti, joka sisältää tunnuksen' demo ”.
  • Käytä seuraavaksi ' insertAdjacentHTML() ' -menetelmällä alaotsikon lisäämiseksi '

    '-tunnisteen kautta ennen '

    ':n alkua, eli ' ennen alkua ” asemaa.
    • Lisää sen jälkeen kohde ' ' -tunnisteen '
      ' -tunnisteen alun jälkeen, eli ' jälkialusta ” asemaa.
      • Käytä jälleen ' ' -tunnistetta lisätäksesi luettelokohteen ennen '
        ' -tunnisteen loppua, eli ' ennen loppua ” asemaa.
        • Lisää lopuksi kappale '

          '-tunnisteen avulla '

          '-tunnisteen lopun ' jälkikäteen ” asemaa.

          Lähtö
          

          Kuten näkyy, kaikki määritetyt HTML-elementit lisätään niille määritettyyn paikkaan ' insertAdjacentHTML() ”menetelmä.

          Johtopäätös

          JavaScript tarjoaa hyvämaineisen sisäänrakennetun ' insertAdjacentHTML() ” menetelmä HTML-elementin liittämiseksi neljään eri kohtaan. Se kehottaa selainta säätämään ilmoitettua HTML-elementtiä kohdassa ' ennen alkua ”, “ ennen loppua ”, “ jälkialusta ', ja ' jälkikäteen ” asemat suhteessa tiettyyn elementtiin. Tässä oppaassa käsiteltiin 'insertAdjacentHTML()' -menetelmän toimintaa ja käyttöä yksityiskohtaisesti.