Jika ingin menyisipkan konten dalam dokumen HTML, ada tiga cara untuk melakukannya:
- Menggunakan metode DOM seperti
createNode
danappendChild
- 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.