Add template mutation demo.

bennadel · Mar 22, 2024 · 8c620c6 · 8c620c6
1 parent f8028c0
commit 8c620c6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [HTML Templates Can Be Mutated Just Like Any Other DOM](https://bennadel.github.io/JavaScript-Demos/demos/mutate-template)
 * [CSS Enter Animations Follow The 80/20 Rule](https://bennadel.github.io/JavaScript-Demos/demos/enter-animations-80-20)
 * [Reading Element Attributes In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/attribute-parts)
 * [Using The AngularJS Parser To Comply With CSP In Alpine.js 3.13.5](https://bennadel.github.io/JavaScript-Demos/demos/angularjs-parser-in-alpinejs)

diff --git a/demos/mutate-template/index.htm b/demos/mutate-template/index.htm
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<link rel="stylesheet" type="text/css" href="./main.css" />
+</head>
+<body>
+
+	<h1>
+		HTML Templates Can Be Mutated Just Like Any Other DOM
+	</h1>
+
+	<div x-data="{ isShowing: false }">
+
+		<button @click="( isShowing = ! isShowing )">
+			Toggle Template
+		</button>
+
+		<template x-if="isShowing" class="counter-template">
+			<p>
+				Counter: <strong class="counter">0</strong>
+			</p>
+		</template>
+
+	</div>
+
+	<script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.js" defer></script>
+	<script type="text/javascript">
+
+		var counter = 0;
+
+		// Update the contents of the template every second.
+		setInterval(
+			() => {
+
+				var target = document.querySelector( ".counter-template" )
+					// The template contents represent a detached document fragment that
+					// provides its own DOM that can be inspected using querySelector().
+					.content
+					.querySelector( ".counter" )
+				;
+
+				target.innerText = ++counter;
+
+			},
+			1000
+		);
+
+	</script>
+
+</body>
+</html>
diff --git a/demos/mutate-template/main.css b/demos/mutate-template/main.css
@@ -0,0 +1,4 @@
+body,
+button {
+	font-family: monospace ;
+}