Använda template med JavaScript-rendering
Kombinera mallar med JavaScript-loopar för dynamiska listor
Använda template med JavaScript-rendering är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
template-elementet
Elementet <template> innehåller HTML som inte renderas förrän det klonas och infogas av JavaScript. Innehållet är inaktivt — skript körs inte, bilder laddas inte och stilar tillämpas inte — förrän templaten aktiveras.
Åtkomst till template-innehåll
Template-innehåll finns i ett DocumentFragment på template.content. Klona fragmentet för att använda det: const clone = template.content.cloneNode(true). Argumentet true utför en djup kloning som inkluderar alla underordnade noder.
Rendera template-instanser
Anpassa klonen innan den infogas: sök efter element i klonen, ange textinnehåll och lägg till eventlyssnare. Lägg sedan till den i DOM: container.appendChild(clone). Varje cloneNode() skapar en fristående kopia — ändra en kopia utan att påverka de andra.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Rendera listor från templates
Kombinera templates med Array.forEach eller Array.map för att rendera listor: för varje objekt i data klonar du templaten, fyller i värdena och lägger till objektet i en listcontainer. Det här mönstret liknar användningen av ett ramverk, men bygger på vanlig HTML och JavaScript.
Template för tabellrader
Definiera en <template> som innehåller en <tr> med celler. Klona och fyll i den för varje datarad. Då slipper du sammanfoga strängar för att skapa HTML — ingen escapning krävs eftersom du anger textContent i stället för innerHTML.
Template-aktivering är explicit
Templates renderas aldrig automatiskt. Det gör dem säkra för att lagra fragment som ska renderas villkorligt: visa en template för "inga resultat" endast när sökningen inte hittar något, en feltemplate endast vid nätverksfel och ett laddningsskelett medan data hämtas.
Kapslade templates
En template kan innehålla andra templates — kapslade templates förblir inaktiva inuti den yttre templatens DocumentFragment. Det möjliggör komponentliknande hierarkier där en yttre template klonas och sedan aktiverar inre templates efter behov.
Omfattningsbegränsade stilar i templates
Stilar i en templates <style>-tagg tillämpas inte på dokumentet — de är inaktiva tills templaten instansieras och innehållet flyttas till den aktiva DOM:en. På så sätt kan templates bära med sig sina egna stilar utan att påverka resten av sidan.
template jämfört med innerHTML
innerHTML-tolkning är synkron behandling av HTML-strängar — HTML tolkas på nytt varje gång. template.cloneNode() kopierar ett redan tolkat träd. Vid upprepad rendering av samma struktur är templateloning snabbare och undviker XSS-risker från strängsammanfogning.
Begränsningar vid databindning
template-elementet har ingen inbyggd databindning — du måste manuellt söka efter element och fylla i varje klon. För komplexa behov av databindning passar ett ramverk eller bibliotek bättre. Templates är avsedda för enkla, manuella renderingsmönster utan kostnaden för ett ramverk.
Webbläsarstöd
template-elementet stöds i alla moderna webbläsare (IE11 hade delvis stöd). För miljöer som kräver IE kan du använda en polyfill som tolkar template-innehållet vid initieringen. I moderna projekt använder du template utan polyfill.
Kunskapskontroll
Varför föredras template.content.cloneNode(true) framför innerHTML vid upprepad rendering?
Sammanfattning
template-elementet innehåller inaktiva, förtolkade HTML-fragment. Genom att klona template.content skapas fristående instanser för manuell databindning. Tillsammans med tilldelning via textContent (utan XSS) möjliggör templates ramverksliknande list-rendering, villkorlig UI och återanvändbara HTML-mönster med enbart webbläsarens standard-API:er.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Använda template med JavaScript-rendering” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Använda template med JavaScript-rendering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Använda template med JavaScript-rendering”?
Kombinera mallar med JavaScript-loopar för dynamiska listor Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Använda template med JavaScript-rendering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- template-elementet och inaktivt innehåll
- Klona mallar med cloneNode
- Använda template med JavaScript-rendering
- Mallar jämfört med innerHTML ur säkerhetssynpunkt