How do I load an ejs template file into my HTML?

Question

I am using EJS in the browser (not on the server).

I have some ejs that I would like to use in multiple pages, so I want to put that in its own file, say table.ejs.

Is there a way I can include it in my HTML such that it is immediately accessible to my javascript after onload?

I was thinking something like:

<script id="table-ejs" type="text/ejs" src="ejs/table.ejs"></script>

then in my javascript:

ejs.render(document.querySelector('#table-ejs').???, data)

Is this possible?

I could use the Fetch API to retrieve the ejs file but then I would need to rewrite a lot of code to make it async. I was wondering if I could avoid that.

Answer 1

Well, place all your ejs-files within a file "views" - within your views you can create another file "partials" - in this file you place your header and footer.ejs.

Within, lets say, your home.ejs you have to include the following code:

<%- include('partials/header'); -%>
// the rest of your code
<%- include('partials/footer'); -%>

You can find more here: https://ejs.co/#docs