With the code below, the contents of car.ejs appears properly.
<div id="carHolder">
<%- include('car.ejs') %>
</div>
Then I want to include multiple car.ejs dynamically, so I tried this:
<script>
document.getElementById("carHolder").innerHTML += "<%- include('car.ejs') %>";
</script>
But there is still only one car.ejs appearing. I also tried with empty div:
<div id="carHolder"></div>
<script>
document.getElementById("carHolder").innerHTML = "<%- include('car.ejs') %>";
</script>
Then there's no car.ejs appearing at all. How to dynamically include ejs with innerHTML?
ejs is a JavaScript library which allows you to render .ejs templates.
It must be rendered by the library.
A minimal example from their website ():
<script src="ejs.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'];
let html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>
In line 4 you see how you can render .ejs content on the fly within the browser.
But I doubt that include will for for the browser version.
A possible solution would be to load the content of car.ejs into a variable beforehand and just render that instead.