Apa yang dilakukan Metode insertAdjacentHTML() dalam JavaScript

Panduan ini menjelaskan tujuan, cara kerja, dan penggunaan metode “insertAdjacent HTML()” dalam JavaScript.

Apa yang dilakukan Metode “insertAdjacentHTML()” dalam JavaScript?

“ masukkanAdjacentHTML() ” metode membantu pengguna untuk memasukkan kode HTML ke posisi tertentu.

Sintaksis

Dalam sintaks di atas:

• elemen : Ini mewakili elemen HTML terkait.
• posisi : Menentukan empat posisi relatif elemen HTML, sebagai berikut:
• sebelum dimulai : Sebelum elemen HTML.
• afterbegin : Tepat setelah anak pertama dari elemen HTML.
• akhir : Di akhir elemen HTML.
• sebelumnya : Setelah anak terakhir dari elemen HTML.
• html : Ini mengacu pada elemen HTML yang disisipkan.

Contoh: Menerapkan “insertAdjacentHTML()” ke Insert Elements At Relative Positions
Contoh ini menerapkan metode yang dibahas untuk menyisipkan elemen pada empat posisi tertentu sehubungan dengan elemen tertentu yaitu, “

”.

---





---

Kode HTML
Pertama, pergi melalui kode HTML berikut:

< h2 > insertAdjacentHTML() Metode dalam JavaScript < / h2 >
< ul pengenal = 'demo' >
< itu > Linux < / itu >
< / ul >

Dalam cuplikan kode di atas:




• Pertama, buat subjudul menggunakan “

  ” tag.

• Selanjutnya, gunakan “
  ” untuk membuat daftar yang tidak diurutkan dengan id 'demo' yang ditetapkan.
  • “ “ tag menambahkan item yang disebutkan dalam daftar.

  Kode JavaScript
  Sekarang, lanjutkan ke blok kode JavaScript:

  < naskah >
  mari daftar = dokumen. getElementById ( 'demo' ) ;
  daftar. insertAdjacentHTML ( 'sebelum dimulai' , '

  Sistem Operasi

  ' ) ;
  daftar. insertAdjacentHTML ( 'setelah awal' , '
• Jendela
' ) ;
daftar. insertAdjacentHTML ( 'sebelumnya' , '
• MacOS
' ) ;
daftar. insertAdjacentHTML ( 'setelah akhir' , '

Itu saja

' ) ;
naskah >

Dalam cuplikan kode di atas:

• Deklarasikan variabel “ daftar ” yang menggunakan “ getElementById() ” metode untuk mengambil yang disertakan “
  elemen ” yang terdiri dari id “ demo ”.
  • Selanjutnya, terapkan ' masukkanAdjacentHTML() ” untuk menyisipkan subjudul melalui tag “

    ” sebelum dimulainya “

    ” yaitu, di “ sebelum dimulai ' posisi.
    • Setelah itu, masukkan item melalui tombol “ ” setelah dimulainya tag “
      ” yaitu, di bagian “ afterbegin ' posisi.
      • Sekali lagi, gunakan ' “ untuk menambahkan item daftar sebelum akhir tag “
        ” yaitu, di “ sebelumnya ' posisi.
        • Terakhir, sisipkan paragraf dengan bantuan tag “

          ” setelah akhir tag “

          ” di bagian “ akhir ' posisi.

          Keluaran
          

          Seperti yang terlihat, semua elemen HTML yang ditentukan disisipkan pada posisi yang ditentukan dengan bantuan ' masukkanAdjacentHTML() ' metode.

          Kesimpulan

          JavaScript menyediakan “ masukkanAdjacentHTML() ” metode untuk menambahkan elemen HTML pada empat posisi berbeda. Itu menginstruksikan browser untuk menyesuaikan elemen HTML yang disebutkan di ' sebelum dimulai ”, “ sebelumnya ”, “ afterbegin ”, dan “ akhir ” posisi sehubungan dengan elemen tertentu. Panduan ini membahas cara kerja dan penggunaan metode “insertAdjacentHTML()” secara mendetail.