Menggunakan template dengan Perenderan JavaScript

Elemen <template> menyimpan HTML yang tidak dirender sampai dikloning dan disisipkan oleh JavaScript. Kontennya tidak aktif—skrip tidak berjalan, gambar tidak dimuat, dan gaya tidak diterapkan—sampai template diaktifkan.

Konten template berada dalam DocumentFragment di template.content. Untuk menggunakannya, kloning fragmen tersebut: const clone = template.content.cloneNode(true). Argumen true melakukan kloning mendalam yang mencakup semua simpul turunan.

Sesuaikan klon sebelum menyisipkannya: lakukan query di dalam klon, tetapkan konten teks, dan tambahkan pendengar peristiwa. Kemudian tambahkan ke DOM: container.appendChild(clone). Setiap cloneNode() membuat salinan independen—ubah salah satunya tanpa memengaruhi yang lain.

Gabungkan template dengan Array.forEach atau Array.map untuk merender daftar: untuk setiap item dalam data, kloning template, isi nilainya, lalu tambahkan ke container daftar. Pola ini mirip kerangka kerja, tetapi dibangun di atas HTML dan JavaScript standar.

Tentukan <template> yang berisi <tr> dengan beberapa sel. Kloning dan isi untuk setiap baris data. Cara ini menghindari penggabungan string untuk membuat HTML—tidak diperlukan pelepasan karakter karena Anda menetapkan textContent, bukan innerHTML.

Template tidak pernah dirender secara otomatis. Hal ini membuatnya aman untuk menyimpan fragmen yang akan dirender secara kondisional: tampilkan template "tidak ada hasil" hanya ketika pencarian tidak menghasilkan apa pun, template kesalahan hanya saat terjadi kegagalan jaringan, dan kerangka pemuatan selama pengambilan data.

Sebuah template dapat berisi template lain—template bertingkat tetap tidak aktif di dalam DocumentFragment template luar. Hal ini memungkinkan hierarki mirip komponen, dengan template luar yang mengkloning lalu mengaktifkan template bagian dalam sesuai kebutuhan.

Gaya di dalam tag <style> milik template tidak diterapkan ke dokumen—gaya tersebut tidak aktif sampai template dibuat menjadi instans dan kontennya dipindahkan ke DOM aktif. Dengan demikian, template dapat membawa gayanya sendiri tanpa mengotori halaman.

Penguraian innerHTML adalah pemrosesan string HTML secara sinkron—HTML diuraikan ulang setiap kali. template.cloneNode() menyalin pohon yang sudah diuraikan. Untuk perenderan berulang dengan struktur yang sama, kloning template lebih cepat dan menghindari risiko XSS dari penggabungan string.

Elemen template tidak memiliki pengikatan data bawaan—Anda harus melakukan query dan mengisi setiap klon secara manual. Untuk kebutuhan pengikatan data yang kompleks, kerangka kerja atau pustaka lebih sesuai. Template ditujukan untuk pola perenderan manual yang sederhana tanpa beban kerangka kerja.

Elemen template didukung di semua peramban modern (IE11 hanya memiliki dukungan sebagian). Untuk lingkungan yang memerlukan dukungan IE, gunakan polyfill dengan menguraikan konten template saat inisialisasi. Dalam proyek modern, gunakan template tanpa polyfill.

Mengapa template.content.cloneNode(true) lebih disarankan daripada innerHTML untuk perenderan berulang?

Elemen template menyimpan fragmen HTML yang tidak aktif dan telah diuraikan sebelumnya. Kloning template.content membuat instans independen untuk pengikatan data manual. Jika dipadukan dengan penetapan textContent (tanpa XSS), template memungkinkan perenderan daftar, antarmuka pengguna kondisional, dan pola HTML yang dapat digunakan kembali dengan hanya API peramban standar.