Bruk av template med JavaScript-gjengivelse
Kombiner maler med JavaScript-løkker for dynamiske lister
Bruk av template med JavaScript-gjengivelse er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
template-elementet
<template>-elementet inneholder HTML som ikke gjengis før det klones og settes inn av JavaScript. Innholdet er inaktivt — skript kjøres ikke, bilder lastes ikke inn og stiler brukes ikke — før templaten aktiveres.
Få tilgang til template-innhold
Template-innholdet ligger i en DocumentFragment på template.content. For å bruke det må fragmentet klones: const clone = template.content.cloneNode(true). Argumentet true utfører en dyp kloning som inkluderer alle underordnede noder.
Gjengi template-forekomster
Tilpass klonen før den settes inn: søk i klonen, angi tekstinnhold og legg til hendelseslyttere. Legg deretter klonen til i DOM-en: container.appendChild(clone). Hvert kall til cloneNode() oppretter en uavhengig kopi — én kopi kan endres uten å påvirke de andre.
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);
}Gjengi lister fra templater
Kombiner templater med Array.forEach eller Array.map for å gjengi lister: For hvert element i dataene klones templaten, verdiene fylles inn, og elementet legges til i en listebeholder. Dette mønsteret minner om et rammeverk, men bygger på standard HTML og JavaScript.
template for tabellrader
Definer en <template> som inneholder en <tr> med celler. Klon og fyll ut en rad for hver datarad. Dette unngår strengsammenslåing ved generering av HTML — ingen escaping er nødvendig siden du angir textContent i stedet for innerHTML.
Aktivering av template er eksplisitt
Templater gjengis aldri automatisk. Dette gjør dem egnet til å lagre fragmenter som skal gjengis betinget: Vis en «ingen resultater»-template bare når søket ikke gir resultater, en feiltemplate bare ved nettverksfeil og en lasteskeleton mens data hentes.
Nøstede templater
En template kan inneholde andre templater — nøstede templater forblir inaktive inne i den ytre templaten sin DocumentFragment. Dette muliggjør komponentlignende hierarkier der en ytre template klones og deretter aktiverer indre templater etter behov.
Omfangsbegrensede stiler i templater
Stiler inne i en templates <style>-tagg gjelder ikke for dokumentet — de er inaktive til templaten opprettes og innholdet flyttes til den aktive DOM-en. Dette gjør det mulig for templater å ha med egne stiler uten å påvirke resten av siden.
template kontra innerHTML
innerHTML-analyse er synkron behandling av HTML-strenger — HTML-en analyseres på nytt hver gang. template.cloneNode() kopierer et tre som allerede er analysert. Ved gjentatt gjengivelse av samme struktur er kloning av template raskere og unngår XSS-risiko ved strengsammenslåing.
Begrensninger ved databinding
template-elementet har ingen innebygd databinding — du må søke etter og fylle ut hver klon manuelt. For komplekse behov for databinding er et rammeverk eller bibliotek mer egnet. Templater er beregnet på enkle, manuelle gjengivelsesmønstre uten belastningen et rammeverk medfører.
Nettleserstøtte
template-elementet støttes i alle moderne nettlesere (IE11 hadde delvis støtte). For miljøer som krever IE-støtte kan du bruke en polyfill ved å analysere template-innholdet under initialisering. I moderne prosjekter kan template brukes uten polyfill.
Kunnskapssjekk
Hvorfor foretrekkes template.content.cloneNode(true) fremfor innerHTML ved gjentatt gjengivelse?
Oppsummering
template-elementet inneholder inaktive, forhåndsanalyserte HTML-fragmenter. Kloning av template.content oppretter uavhengige forekomster for manuell databinding. Kombinert med tildeling via textContent (uten XSS) muliggjør templater rammeverkslignende listegjengivelse, betinget UI og gjenbrukbare HTML-mønstre ved hjelp av bare standard-API-er i nettleseren.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Bruk av template med JavaScript-gjengivelse» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Bruk av template med JavaScript-gjengivelse», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bruk av template med JavaScript-gjengivelse»?
Kombiner maler med JavaScript-løkker for dynamiske lister Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Bruk av template med JavaScript-gjengivelse»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- template-elementet og inaktivt innhold
- Kloning av maler med cloneNode
- Bruk av template med JavaScript-gjengivelse
- Maler kontra innerHTML-sikkerhet