Meta tags:
description=Lerne, wie das HTML template -Element inerte, wiederverwendbare Markup-Strukturen speichert und wie du dessen Inhalt mit JavaScript klonst, um dynamische UIs…;

Headings (most frequently used words):

template, element, das, verstehen, templates, für, dynamischen, inhalt, klonen, interaktivität, mit, javascript, erweitern, häufige, fallstricke, browser, unterstützung, fazit, übungen,

Text of the page (most frequently used words):
und (66), #template (63), content (37), dom (34), das (33), button (24), die (23), the (23), javascript (21), card (19), api (19), html (18), div (18), lernen (16), inhalt (16), für (15), mit (15), der (15), ist (15), den (15), document (15), ein (14), element (13), templates (11), web (10), klonen (10), container (10), von (9), wird (9), function (9), browser (8), des (8), klon (8), nicht (8), getelementbyid (8), data (8), methoden (8), this (7), shadow (7), eine (7), true (7), knoten (7), clone (7), const (7), title (7), tools (6), css (6), was (6), elemente (6), auf (6), elements (6), markup (6), oder (6), importnode (6), eines (6), script (6), werden (6), sind (6), dem (6), queryselector (6), wenn (6), einen (6), seite (6), klont (6), event (6), body (6), dokument (6), w3docs (5), übungen (5), bis (5), aus (5), ihn (5), durch (5), insert (5), and (5), string (5), events (5), formatter (5), color (5), alle (4), json (4), generator (4), probier (4), erweitern (4), page (4), funktionen (4), inert (4), beim (4), muster (4), einem (4), innerhalb (4), components (4), ausgeführt (4), ids (4), klonst (4), jede (4), fragment (4), appendchild (4), insertbutton (4), displaytemplatecontent (4), kopieren (4), display (4), here (4), class (4), ohne (4), live (4), ereignisse (4), cards (4), seine (4), wie (4), fetch (4), async (4), einführung (4), code (3), encoder (3), editor (3), quizze (3), php (3), fallstricke (3), definieren (3), direkt (3), zum (3), strings (3), dann (3), einer (3), karte (3), custom (3), skripte (3), aber (3), klassen (3), abfragen (3), add (3), jedes (3), mal (3), inhalts (3), dynamische (3), laden (3), funktion (3), sie (3), listener (3), zwei (3), beispiel (3), selbst (3), buttonclone (3), into (3), cloned (3), property (3), will (3), handling (3), documentfragment (3), item (3), vorlage (3), verwenden (3), darin (3), flag (3), objekte (3), eigenschaften (3), promise (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), unterstützung (2), häufige (2), interaktivität (2), dynamischen (2), verstehen (2), slots (2), komposition (2), erstellen (2), hauptzweck (2), dir (2), native (2), unabhängige (2), bei (2), sein (2), klone (2), vollständigen (2), clonenode (2), teil (2), standard (2), aktuelle (2), macht (2), dass (2), kopie (2), doppelte (2), attribute (2), sodass (2), anhängst (2), leer (2), bevor (2), anhängen (2), immer (2), zuerst (2), try (2), klickst (2), neue (2), fügt (2), hängt (2), call (2), when (2), show (2), btn (2), buttontemplate (2), get (2), contentclone (2), contenttemplate (2), inserted (2), karten (2), eigenschaft (2), gibt (2), inerte (2), instanz (2), eigenen (2), carddata (2), createcards (2), create (2), textcontent (2), head (2), style (2), margin (2), border (2), erzeugt (2), nichts (2), bleibt (2), tiefen (2), import (2), nur (2), dieses (2), daten (2), davon (2), none (2), rest (2), ressourcen (2), geladen (2), gerendert (2), man (2), einfügt (2), methode (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), styles (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), prototypes (2), interaktive (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, über, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, gestalten, webseite, rendern, wiederverwendbaren, übung, bietet, framework, möglichkeit, wiederverwendbares, bedarf, instanziieren, vermeidet, verschwendete, rendering, ressourcenladen, versteckter, umgeht, sicherheits, parsing, eigenheiten, aufbau, fülle, hänge, hast, effizientes, einzelnen, hin, komponentensystem, skaliert, komponente, sehen, fahre, fort, living, jedem, modernen, unterstützt, chrome, firefox, safari, edge, kein, polyfill, erforderlich, sicheren, abhängigkeitsfreien, wahl, clientseitiges, templating, außer, erstellst, neu, halte, verhalten, deinem, erwarten, geschrieben, unproblematisch, sobald, mehrfach, trägt, dieselbe, ungültiges, bevorzuge, bereichsbezogene, statt, instanzspezifische, suchen, verschiebt, fragments, klons, kindern, ziel, lese, ändere, danach, nach, direkte, leert, vergessen, einige, fehlerquellen, meisten, bugs, verantwortlich, also, yourself, siehst, beschriftung, darauf, zur, hinzugefügt, einfügen, benutzerinteraktion, demonstriert, aufruf, eingefügt, geklickt, außerdem, klicken, aufruft, wir, haben, diesem, loads, click, addeventlistener, access, displayed, added, dynamically, clicked, dynamic, folgende, definiert, klick, zurück, enthält, kannst, lesen, berühren, saubereres, jedoch, verdrahten, erhält, ihre, ausführlichere, behandlung, anhängens, handlern, siehe, with, provided, customize, foreach, third, second, first, for, multiple, goes, 200, width, padding, radius, ccc, solid, stets, einfügst, ursprünglichen, nächste, wiederverwendung, erhalten, verschiebst, warnung, führt, denselben, importiert, explizit, dies, relevant, anderen, liegt, selben, beide, gleichwertig, sicherere, standardwahl, link, rel, iframe, argument, bedeutet, einschließlich, aller, nachkommen, kopierst, leere, möglichkeiten, allein, keine, sichtbare, ausgabe, liest, füllst, deine, hängst, kann, beliebig, viele, kopien, erzeugen, hidden, you, won, see, not, activated, using, unterscheidet, sich, grundlegend, verstecken, noch, bilder, laufen, findet, lebt, separaten, gestützten, baum, passiert, aktivierst, kollidieren, aktiviert, erst, geklont, video, img, niemals, unabhängig, angezeigt, fungiert, als, sofort, schlüsselidee, kapitel, behandelt, besonders, korrekt, geklonten, verdrahtet, erstbenutzer, treffen, auch, baustein, natürlich, zusammenpassen, ermöglicht, abschnitt, deiner, deklarieren, zwar, parst, rendert, bereit, dein, damit, idiomatische, wiederholte, listenzeilen, modal, dialoge, manuell, aufzubauen, einzufügen, innerhtml, lerne, wiederverwendbare, strukturen, speichert, dessen, uis, effizient, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, console, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, knoteneigenschaften, typ, tag, getelement, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, imports, export, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, apply, settimeout, setinterval, nfe, globales, alte, var, scope, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api template element lerne wie das html template element inerte wiederverwendbare markup strukturen speichert und wie du dessen inhalt mit javascript klonst um dynamische uis effizient zu erstellen das html element template ermöglicht es dir einen markup abschnitt auf deiner seite zu deklarieren den der browser zwar parst aber nicht rendert der inhalt bleibt im dokument bereit inert bis dein javascript ihn klont und in das live dom einfügt damit ist template die idiomatische methode um eine vorlage für wiederholte ui elemente zu definieren listenzeilen karten modal dialoge ohne dom knoten manuell aufzubauen oder html strings in innerhtml einzufügen dieses kapitel behandelt was template inhalt besonders macht wie man ihn korrekt klont und einfügt wie man ereignisse auf geklonten knoten verdrahtet und die fallstricke die erstbenutzer treffen templates sind auch ein baustein von web components wo sie natürlich mit custom elements und dem shadow dom zusammenpassen das template element verstehen das template element fungiert als container für html inhalt der nicht sofort gerendert wird die schlüsselidee ist dass sein inhalt inert ist es wird nicht angezeigt das markup wird niemals gerendert unabhängig von css seine ressourcen werden nicht geladen img video und script innerhalb eines templates werden erst geladen oder ausgeführt wenn der inhalt in das live dokument geklont wird skripte darin werden nicht ausgeführt und ids darin kollidieren nicht mit dem rest der seite bis sie aktiviert werden das unterscheidet sich grundlegend davon ein element mit display none zu verstecken ein element mit display none ist noch immer teil des live dom seine bilder laden seine skripte laufen und document getelementbyid findet elemente darin template inhalt lebt in einem separaten documentfragment gestützten baum sodass nichts davon passiert bis du es durch klonen aktivierst body div you won t see the template as it s not activated using js div div id template container template id my template h1 hidden h1 template div body kopieren probier es selbst templates für dynamischen inhalt klonen ein template ist nur eine vorlage es erzeugt allein keine sichtbare ausgabe um es zu verwenden liest du seine content eigenschaft ein documentfragment klonst dieses fragment füllst deine daten ein und hängst den klon an die seite da du für jede instanz klonst kann ein template beliebig viele unabhängige kopien erzeugen jede mit eigenen daten es gibt zwei möglichkeiten zum klonen template content clonenode true klont das fragment direkt das argument true bedeutet einen tiefen klon einschließlich aller nachkommen ohne es kopierst du nur das leere fragment document importnode template content true führt denselben tiefen klon durch importiert die knoten aber explizit in das aktuelle dokument dies ist relevant wenn das template in einem anderen dokument liegt zum beispiel inhalt aus einem iframe oder link rel import bei templates im selben dokument sind beide gleichwertig importnode ist die sicherere standardwahl warnung klone stets den template inhalt bevor du ihn einfügst wenn du template content direkt anhängst verschiebst du die ursprünglichen knoten aus dem template in den dom das template ist dann leer und der nächste klon erzeugt nichts durch klonen bleibt die vorlage für die wiederverwendung erhalten head style card border 1 px solid ccc border radius 5 px padding 10 px margin 10 px width 200 px card h3 margin 0 style head body div id template container template element template id card template div class card h3 id card title title h3 p id card content content goes here p div template div div id card container cards will be inserted here div script data for multiple cards const carddata title card 1 content this is the first card title card 2 content this is the second card title card 3 content this is the third card function to create and insert cards function createcards data const template document getelementbyid card template data foreach item const clone document importnode template content true customize the cloned content clone queryselector card title textcontent item title clone queryselector card content textcontent item content insert the cloned content into the dom document getelementbyid card container appendchild clone create cards with the provided data createcards carddata script body kopieren probier es selbst interaktivität mit javascript erweitern die content eigenschaft eines templates gibt ein documentfragment zurück das das inerte markup enthält du kannst es abfragen und lesen template content queryselector ohne die live seite zu berühren ein saubereres muster ist jedoch zuerst zu klonen und dann ereignisse am klon zu verdrahten so erhält jede instanz ihre eigenen listener für eine ausführlichere behandlung des anhängens von handlern siehe event handling im dom das folgende beispiel definiert zwei templates einen button und eine inhalts karte ein klick auf den button klont das karten template und hängt jedes mal eine neue kopie an body div id template container button template template id button template button id show content btn add a content card button template content template template id content template div class content h2 dynamic content h2 p this content is added dynamically when the button is clicked p div template div div id button container button will be inserted here div div id content container content will be displayed here div script function to display template content function displaytemplatecontent get the content template const contenttemplate document getelementbyid content template access the content property and clone it const contentclone document importnode contenttemplate content true display the cloned content document getelementbyid content container appendchild contentclone insert the button template into the dom function insertbutton get the button template const buttontemplate document getelementbyid button template const buttonclone document importnode buttontemplate content true add event listener to the button buttonclone queryselector show content btn addeventlistener click displaytemplatecontent insert the button into the dom document getelementbyid button container appendchild buttonclone call the function to insert the button when the page loads insertbutton script body kopieren probier es selbst in diesem beispiel wir haben zwei templates eines für einen button button template und eines für inhalt content template die funktion insertbutton klont das button template und fügt es in den dom ein außerdem hängt sie einen event listener an den button der die funktion displaytemplatecontent beim klicken aufruft die funktion displaytemplatecontent klont das inhalts template und fügt es jedes mal wenn der button geklickt wird in den dom ein der button wird beim laden der seite durch den aufruf von insertbutton in den dom eingefügt wenn du also auf den button try it yourself klickst siehst du einen button mit der beschriftung add a content card jedes mal wenn du darauf klickst wird eine neue karte aus dem inhalts template zur seite hinzugefügt was das dynamische einfügen durch benutzerinteraktion demonstriert häufige fallstricke einige fehlerquellen sind für die meisten template bugs verantwortlich vergessen zu klonen das direkte anhängen von template content leert das template immer zuerst klonen abfragen nach dem anhängen appendchild clone verschiebt die knoten des fragments in den dom sodass die knoten des klons zu kindern des ziel elements werden lese oder ändere den klon clone queryselector bevor du ihn anhängst danach ist das fragment leer doppelte ids ids die innerhalb eines templates geschrieben sind sind inert unproblematisch aber sobald du es mehrfach klonst trägt jede kopie dieselbe id und doppelte ids sind ungültiges html bevorzuge klassen data attribute oder bereichsbezogene abfragen auf dem klon statt document getelementbyid für instanzspezifische suchen erwarten dass skripte ausgeführt werden ein script innerhalb eines templates wird beim klonen nicht ausgeführt außer du erstellst es neu halte das verhalten in deinem javascript nicht im template markup browser unterstützung das template element ist teil des html living standard und wird in jedem modernen browser unterstützt chrome firefox safari edge für aktuelle browser ist kein polyfill erforderlich was es zu einer sicheren abhängigkeitsfreien wahl für clientseitiges templating macht fazit das template element bietet dir eine native framework unabhängige möglichkeit wiederverwendbares markup zu definieren und es bei bedarf zu instanziieren da sein inhalt bis zum klonen inert ist vermeidet es das verschwendete rendering und ressourcenladen versteckter elemente und umgeht die sicherheits und parsing eigenheiten beim aufbau von html aus strings klone mit clonenode true oder importnode fülle den klon aus dann hänge ihn an und du hast ein effizientes muster das von einer einzelnen karte bis hin zu einem vollständigen komponentensystem skaliert um templates innerhalb einer vollständigen komponente zu sehen fahre mit custom elements und web components fort übungen übung was ist der hauptzweck des template elements in javascript was ist der hauptzweck des template elements in javascript wiederverwendbaren html inhalt erstellen html inhalt direkt auf der webseite rendern html elemente mit css gestalten javascript funktionen definieren prüfen was this page helpful yes no previous shadow dom next shadow dom slots komposition on this page das template element verstehen templates für dynamischen inhalt klonen interaktivität mit javascript erweitern häufige fallstricke browser unterstützung fazit übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über...