Brug af template til rendering med JavaScript
Kombinér skabeloner med JavaScript-løkker til dynamiske lister
Brug af template til rendering med JavaScript er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
template-elementet
Elementet <template> indeholder HTML, der ikke gengives, før det klones og indsættes af JavaScript. Indholdet er inaktivt — scripts køres ikke, billeder indlæses ikke, og typografier anvendes ikke — før templaten aktiveres.
Adgang til template-indhold
Template-indhold findes i et DocumentFragment på template.content. Du kan bruge det ved at klone fragmentet: const clone = template.content.cloneNode(true). Argumentet true udfører en dyb kloning, der inkluderer alle underordnede noder.
Gengivelse af template-instanser
Tilpas klonen, før du indsætter den: udfør forespørgsler i klonen, angiv tekstindhold, og tilføj hændelseslyttere. Tilføj derefter klonen til DOM'en: container.appendChild(clone). Hvert kald til cloneNode() opretter en uafhængig kopi — du kan ændre én kopi uden at 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);
}Gengivelse af lister fra templates
Kombinér templates med Array.forEach eller Array.map for at gengive lister: For hvert element i data skal du klone templaten, udfylde værdierne og føje den til en listecontainer. Dette mønster minder om et framework, men er bygget på almindelig HTML og JavaScript.
template til tabelrækker
Definér en <template>, der indeholder en <tr> med celler. Klon og udfyld den for hver datarække. Det undgår strengsammenkædning ved generering af HTML — escaping er ikke nødvendig, fordi du angiver textContent i stedet for innerHTML.
Aktivering af template er eksplicit
Templates gengives aldrig automatisk. Det gør dem sikre til lagring af fragmenter, der kun skal gengives under bestemte betingelser: vis en template med »ingen resultater«, når en søgning ikke returnerer noget, en fejl-template ved netværksfejl og en indlæsningsskelet under dataindlæsning.
Indlejrede templates
En template kan indeholde andre templates — indlejrede templates forbliver inaktive i den ydre templates DocumentFragment. Det muliggør hierarkier, der minder om komponenter, hvor en ydre template kloner og derefter aktiverer indre templates efter behov.
Lokale typografier i templates
Typografier i en templates <style>-tag anvendes ikke på dokumentet — de er inaktive, indtil templaten oprettes, og dens indhold flyttes til den aktive DOM. Det gør det muligt for templates at medbringe deres egne typografier uden at påvirke resten af siden.
template vs innerHTML
Parsing med innerHTML er synkron behandling af HTML-strenge — HTML'en fortolkes igen hver gang. template.cloneNode() kopierer et allerede fortolket træ. Ved gentagen gengivelse af den samme struktur er kloning af templates hurtigere og undgår XSS-risici fra strengsammenkædning.
Begrænsninger ved databinding
template-elementet har ingen indbygget databinding — du skal manuelt udføre forespørgsler og udfylde hver klon. Til komplekse behov for databinding er et framework eller bibliotek mere passende. Templates er beregnet til enkle, manuelle gengivelsesmønstre uden overhead fra et framework.
Browsersupport
template-elementet understøttes i alle moderne browsere (IE11 havde delvis understøttelse). I miljøer, der kræver IE-understøttelse, kan du bruge en polyfill ved at fortolke template-indholdet under initialiseringen. I moderne projekter skal du bruge template uden en polyfill.
Videnstjek
Hvorfor foretrækkes template.content.cloneNode(true) frem for innerHTML ved gentagen gengivelse?
Opsummering
template-elementet indeholder inaktive, på forhånd fortolkede HTML-fragmenter. Kloning af template.content opretter uafhængige instanser til manuel databinding. Kombineret med tildeling via textContent (ingen XSS) muliggør templates frameworklignende listegengivelse, betinget UI og genanvendelige HTML-mønstre udelukkende med standard-API'er i browseren.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Brug af template til rendering med JavaScript” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Brug af template til rendering med JavaScript”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brug af template til rendering med JavaScript”?
Kombinér skabeloner med JavaScript-løkker til dynamiske lister Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Brug af template til rendering med JavaScript”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- template-elementet: inaktivt indhold
- Kloning af skabeloner med cloneNode
- Brug af template til rendering med JavaScript
- Skabeloner kontra innerHTML: sikkerhed