insertAdjacentHTML di mana saja

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

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

Dapat dikatakan bahwa kita juga memiliki document.write untuk beberapa kasus penggunaan.

innerHTML telah distandardisasi di HTML5 dan dengannya metode saudara insertAdjacentHTML yang berfungsi sebagai innerHTML tetapi memungkinkan kita untuk 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 pada insertAdjacentHTML adalah kurangnya dukungan browser. Dengan Firefox yang menerapkan insertAdjacentHTML sejak versi 8, Firefox akan tersedia di semua browser utama termasuk browser seluler. Jika Anda ingin menggunakannya sekarang dan memastikannya berfungsi di Firefox yang lebih lama dari 8, Anda dapat menggunakan polyfill ini.