Skip to content

Instantly share code, notes, and snippets.

@frostzzone

frostzzone/index-1.html

Created November 4, 2022 15:39
Show Gist options
  • Save frostzzone/e6854f302c1ff1968970633c4ba82c78 to your computer and use it in GitHub Desktop.
Save frostzzone/e6854f302c1ff1968970633c4ba82c78 to your computer and use it in GitHub Desktop.
Download ZIP
Using ejs browser client
Raw
index-1.html
<!-- File 1/1 -->
<body>
<template id="names">
<% for (let name of names) { %>
<div><%= name%></div>
<% } %>
</template>
<!-- Import ejs -->
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.8/ejs.min.js"></script>
<div id="target"></div>
<script>
const templateHTML = document.getElementById("names")
.innerHTML
.replace(/\&lt;/g, "<")
.replace(/\&gt;/g, ">");
document.getElementById("target").innerHTML = ejs.render(templateHTML, {names: ["corey", "noah", "alex", "dan"]});
</script>
</body>
Raw
index-2.html
<!-- File 1/2 -->
<body>
<main id="target"></main>
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.8/ejs.min.js"></script>
<script>
fetch("names.ejs").then(async res => {
const resText = await res.text();
document.getElementById("target").innerHTML = ejs.render(resText, {names: ["corey", "noah", "alex", "dan"]});
})
</script>
</body>
Raw
names.ejs
<!-- File 2/2 -->
<% for (let name of names) { %>
<div><%= name%></div>
<% } %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment