Element template — nieaktywna treść
Definiowanie kodu HTML, który jest analizowany, ale nie renderowany do momentu aktywacji
Element template — nieaktywna treść to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest element template
Element <template> przechowuje kod HTML, który jest analizowany, ale nie jest renderowany:
- Zawartość znajduje się w DOM, ale nie jest wyświetlana
- Skrypty wewnątrz nie są wykonywane
- Obrazy nie są ładowane
- CSS nie jest stosowany
- Element pozostaje „nieaktywny” do momentu sklonowania
Podstawowe użycie template
Zdefiniuj szablon i sprawdź jego zawartość:
<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
Właściwość .content zwraca obiekt 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 itKlonowanie szablonu
Użyj cloneNode(true), aby utworzyć kopię zawartości szablonu:
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);Renderowanie listy z szablonu
Utwórz wiele elementów na podstawie jednego szablonu:
<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>Dlaczego template zamiast innerHTML
template jest bezpieczniejszy i wydajniejszy niż 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 z zagnieżdżonymi danymi
Złożone szablony ze zagnieżdżonymi strukturami:
<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 nie jest renderowany
Sprawdź, czy zawartość template jest ukryta przed użytkownikami:
<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 a script type=text/html
Starszy wzorzec a nowoczesny template:
<!-- 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 w bibliotekach komponentów
Wzorce użycia szablonów w bibliotekach komponentów vanilla:
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);
}
}Szybkie sprawdzenie
Co cloneNode(true) robi z właściwością content szablonu?
Podsumowanie: element template
Najważniejsze informacje o template:
- Nieaktywny HTML — analizowany, ale nierenderowany
template.content— zwraca obiekt DocumentFragmentcontent.cloneNode(true)— tworzy głęboką kopię gotową do modyfikacji i dodania do DOM- Bezpieczniejszy niż innerHTML — brak wstrzyknięcia HTML dzięki textContent
- Używany w elementach niestandardowych, powtarzalnych wzorcach interfejsu i Web Components
Często zadawane pytania
Czy lekcja „Element template — nieaktywna treść” jest bezpłatna?
Tak — pełny tekst „Element template — nieaktywna treść” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Element template — nieaktywna treść”?
Definiowanie kodu HTML, który jest analizowany, ale nie renderowany do momentu aktywacji Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Element template — nieaktywna treść”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Element template — nieaktywna treść
- Klonowanie szablonów za pomocą cloneNode
- Używanie template do renderowania za pomocą JavaScript
- Szablony a bezpieczeństwo innerHTML