Elemen template untuk Konten Inert
Definisikan HTML yang diuraikan tetapi tidak dirender hingga diaktifkan.
Elemen template untuk Konten Inert adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu Elemen template?
Elemen <template> menyimpan HTML yang diuraikan tetapi tidak dirender:
- Konten berada di DOM tetapi tidak ditampilkan
- Skrip di dalamnya tidak dijalankan
- Gambar tidak dimuat
- CSS tidak diterapkan
- Elemen ini 'tidak aktif' sampai dikloning
Penggunaan Dasar template
Tentukan template dan periksa kontennya:
<template id="card-template">
<div class="card">
<h2 class="card-title"></h2>
<p class="card-body"></p>
<a class="card-link">Learn more</a>
</div>
</template>
<script>
const tmpl = document.getElementById('card-template');
console.log(tmpl.content); // DocumentFragment
console.log(tmpl.content.querySelector('.card')); // The div node
// Not rendered on the page yet
</script>template.content
Properti .content mengembalikan DocumentFragment:
const template = document.querySelector('#card-template');
const fragment = template.content;
// fragment is a DocumentFragment — a lightweight DOM container
// It is not attached to the document
// Modifying fragment does NOT affect the original template
// You must clone it before using itMengkloning Template
Gunakan cloneNode(true) untuk membuat salinan konten template:
const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true); // true = deep clone
// Modify the clone:
clone.querySelector('.card-title').textContent = 'HTML5 Guide';
clone.querySelector('.card-body').textContent = 'Learn HTML5 from scratch.';
clone.querySelector('.card-link').href = '/html5';
// Add to the page:
document.getElementById('card-list').appendChild(clone);Merender Daftar dari Template
Buat beberapa item dari satu template:
<ul id="users"></ul>
<template id="user-tmpl">
<li class="user">
<strong class="user-name"></strong>
<span class="user-role"></span>
</li>
</template>
<script>
const tmpl = document.getElementById('user-tmpl');
const list = document.getElementById('users');
const users = [
{ name: 'Alice', role: 'Admin' },
{ name: 'Bob', role: 'Editor' },
];
users.forEach(user => {
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.user-name').textContent = user.name;
clone.querySelector('.user-role').textContent = user.role;
list.appendChild(clone);
});
</script>Mengapa Menggunakan template, Bukan innerHTML?
template lebih aman dan efisien daripada innerHTML:
// innerHTML approach (less safe):
container.innerHTML = `<div>${userProvidedContent}</div>`;
// Risk: XSS if userProvidedContent is not sanitized
// template approach (safer):
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.name').textContent = userProvidedContent;
// textContent sets text only — HTML tags are not parsed
// No XSS risktemplate dengan Data Bertingkat
Template kompleks dengan struktur bertingkat:
<template id="post-tmpl">
<article>
<header>
<h2 class="title"></h2>
<time class="date" datetime=""></time>
</header>
<p class="excerpt"></p>
<a class="read-more">Read more</a>
</article>
</template>
<script>
function renderPost(post) {
const clone = document.getElementById('post-tmpl').content.cloneNode(true);
clone.querySelector('.title').textContent = post.title;
clone.querySelector('.date').textContent = post.date;
clone.querySelector('.date').dateTime = post.isoDate;
clone.querySelector('.excerpt').textContent = post.excerpt;
clone.querySelector('.read-more').href = post.url;
return clone;
}
</script>template Tidak Dirender
Pastikan konten template tersembunyi dari pengguna:
<template id="hidden-tmpl">
<script>alert('This runs when cloned, not when defined');</script>
<img src="wont-load-yet.jpg" alt="Won't load until cloned">
</template>
<!-- The script and image are NOT activated until you clone and append the template -->
<!-- This makes templates safe for defining content without side effects -->template vs script type=text/html
Pola lama dibandingkan dengan template modern:
<!-- Old pattern (script hack): -->
<script type="text/html" id="old-tmpl">
<div class="card">...</div>
</script>
<script>
const html = document.getElementById('old-tmpl').innerHTML;
container.innerHTML = html; // XSS risk!
</script>
<!-- Modern template: -->
<template id="card-tmpl">...</template>
<!-- Safer, semantic, no XSS risk -->template dalam Pustaka Komponen
Pola template dalam pustaka komponen tanpa kerangka kerja:
class UserCard extends HTMLElement {
connectedCallback() {
const tmpl = document.getElementById('user-card-tmpl').content.cloneNode(true);
tmpl.querySelector('.name').textContent = this.getAttribute('name');
this.appendChild(tmpl);
}
}Pemeriksaan Singkat
Apa yang dilakukan cloneNode(true) terhadap properti content milik template?
Ikhtisar: Elemen template
Hal-hal penting tentang template:
- HTML tidak aktif — diuraikan tetapi tidak dirender
template.content— mengembalikan DocumentFragmentcontent.cloneNode(true)— salinan mendalam yang siap diubah dan ditambahkan- Lebih aman daripada innerHTML — tidak ada injeksi HTML melalui textContent
- Digunakan dalam elemen khusus, pola antarmuka pengguna berulang, dan Komponen Web
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Elemen template untuk Konten Inert” gratis?
Ya — teks lengkap “Elemen template untuk Konten Inert” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Elemen template untuk Konten Inert”?
Definisikan HTML yang diuraikan tetapi tidak dirender hingga diaktifkan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Elemen template untuk Konten Inert” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Elemen template untuk Konten Inert
- Mengkloning Template dengan cloneNode
- Menggunakan template dengan Perenderan JavaScript
- Keamanan Template vs innerHTML