insertAdjacentHTML di mana saja

Jika ingin menyisipkan konten dalam dokumen HTML, ada tiga cara untuk melakukannya:

  • Menggunakan metode DOM seperti createNode dan appendChild
  • Menggunakan Fragmen Dokumen
  • Menggunakan innerHTML

Kita juga dapat mengatakan bahwa kita memiliki document.write untuk beberapa kasus penggunaan.

innerHTML telah distandarisasi di HTML5 dan dengan metode saudara insertAdjacentHTML yang berfungsi sebagai innerHTML, tetapi memungkinkan kita menentukan secara lebih spesifik tempat kita ingin menyisipkan konten HTML: beforeBegin, afterBegin, beforeEnd, dan afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

Pada tahun 2008, John Resig menulis artikel tentang insertAdjacentHTML dengan kesimpulan ini:

Hingga saat ini, masalah utama dengan insertAdjacentHTML adalah kurangnya dukungan browser. Dengan Firefox menerapkan insertAdjacentHTML mulai versi 8, fitur ini akan tersedia di semua browser utama, termasuk browser seluler. Jika ingin menggunakannya sekarang dan memastikannya berfungsi di Firefox versi sebelum 8, Anda dapat menggunakan polyfill ini.