Apakah yang dilakukan oleh Kaedah insertAdjacentHTML() dalam JavaScript

Panduan ini menerangkan objektif, kerja dan penggunaan kaedah 'insertAdjacent HTML()' dalam JavaScript.

Apakah yang dilakukan oleh Kaedah 'insertAdjacentHTML()' dalam JavaScript?

' insertAdjacentHTML() ” kaedah membantu pengguna untuk memasukkan kod HTML ke dalam kedudukan tertentu.

Sintaks

Dalam sintaks di atas:

• unsur : Ia mewakili elemen HTML yang berkaitan.
• kedudukan : Ia menentukan empat kedudukan relatif elemen HTML, seperti berikut:
• sebelum mula : Sebelum elemen HTML.
• selepas mula : Sejurus selepas anak pertama elemen HTML.
• selepas itu : Pada penghujung elemen HTML.
• sebelum akhir : Selepas anak terakhir elemen HTML.
• html : Ia merujuk kepada elemen HTML yang dimasukkan.

Contoh: Menggunakan 'insertAdjacentHTML()' untuk Memasukkan Elemen Pada Kedudukan Relatif
Contoh ini menggunakan kaedah yang dibincangkan untuk memasukkan elemen pada empat kedudukan tertentu berkenaan dengan elemen tertentu iaitu, '

”.

---





---

Kod HTML
Pertama, pergi melalui kod HTML berikut:

< h2 > Kaedah insertAdjacentHTML() dalam JavaScript < / h2 >
< ul ID = 'demo' >
< itu > Linux < / itu >
< / ul >

Dalam coretan kod di atas:




• Pertama, buat subtajuk menggunakan '

  ” tag.

• Seterusnya, gunakan '
  teg ” untuk mencipta senarai tidak tersusun dengan id “demo” yang diberikan.
  • ' “ tag menambah item yang dinyatakan dalam senarai.

  Kod JavaScript
  Sekarang, teruskan ke blok kod JavaScript:

  < skrip >
  mari senaraikan = dokumen. getElementById ( 'demo' ) ;
  senarai. masukkanAdjacentHTML ( 'sebelum bermula' , '

  Sistem Pengendalian

  ' ) ;
  senarai. masukkanAdjacentHTML ( 'selepas mula' , '
• Windows
' ) ;
senarai. masukkanAdjacentHTML ( 'sebelum' , '
• OS Mac
' ) ;
senarai. masukkanAdjacentHTML ( 'selepas itu' , '

Itu sahaja

' ) ;
skrip >

Dalam coretan kod di atas:

• Istiharkan pembolehubah “ senarai ” yang menggunakan “ getElementById() ' kaedah untuk mengambil yang disertakan '
  'elemen yang terdiri daripada id' demo ”.
  • Seterusnya, gunakan ' insertAdjacentHTML() ” kaedah untuk memasukkan subtajuk melalui teg “

    ” sebelum permulaan “

    ” iaitu, pada “ sebelum mula ” kedudukan.
    • Selepas itu, masukkan item melalui ' teg ” selepas permulaan teg “
      ” iaitu, pada “ selepas mula ” kedudukan.
      • Sekali lagi, gunakan ' teg “ untuk menambah item senarai sebelum akhir teg “
        ” iaitu, pada “ sebelum akhir ” kedudukan.
        • Akhir sekali, masukkan perenggan dengan bantuan teg “

          ” selepas penghujung teg “

          ” pada “ selepas itu ” kedudukan.

          Pengeluaran
          

          Seperti yang dilihat, semua elemen HTML yang ditakrifkan dimasukkan pada kedudukan yang ditetapkan dengan bantuan ' insertAdjacentHTML() ” kaedah.

          Kesimpulan

          JavaScript menyediakan ' terbina dalam yang terkenal insertAdjacentHTML() ” kaedah untuk menambahkan elemen HTML pada empat kedudukan berbeza. Ia mengarahkan penyemak imbas untuk melaraskan elemen HTML yang dinyatakan di “ sebelum mula ”, “ sebelum akhir ”, “ selepas mula ', dan juga ' selepas itu ” jawatan berkenaan dengan unsur tertentu. Panduan ini membincangkan cara kerja dan penggunaan kaedah 'insertAdjacentHTML()' secara terperinci.