如何通过innerHTML实现EJS模板的动态引入？

根本原因 #

EJS 是服务端模板引擎，所有 <% %> 包裹的语法只会在服务端返回页面前完成解析替换，浏览器拿到的最终HTML里不会保留任何EJS标签。你把<%- include('car.ejs') %>写在<script>标签内时，服务端默认不会解析脚本内的EJS语法，会直接把这段字符串原样返回给浏览器，浏览器无法识别EJS语法，赋值给innerHTML自然不会生效。

你最开始看到的一个car.ejs内容，是写在<div id="carHolder">内部的<%- include('car.ejs') %>被服务端解析渲染出来的，脚本里的语句全程没有生效。

解决方案 #

分两种场景实现需求：

场景1：服务端提前知道需要渲染的模板数量 #

直接在服务端用EJS循环渲染即可，不需要客户端操作：

<div id="carHolder">
    <% // 替换为你实际需要渲染的数量
    for(let i = 0; i < 渲染数量; i++) { %>
        <%- include('car.ejs') %>
    <% } %>
</div>

场景2：需要在客户端动态追加模板（比如用户点击按钮新增） #

先在服务端渲染阶段把car.ejs的内容预存为客户端可调用的模板字符串，再在需要的时候插入DOM：

1. 先预存模板内容，注意处理特殊字符避免JS语法报错：

<script>
// 服务端提前解析car.ejs内容，转义后存为JS字符串
const carTemplate = `<%- include('car.ejs').replace(/`/g, '\\`').replace(/\n/g, '') %>`;
</script>

2. 动态插入模板：

<script>
const carHolder = document.getElementById("carHolder");
// 单次插入
carHolder.innerHTML += carTemplate;
// 要插入多个直接循环即可
for(let i = 0; i < 你需要的数量; i++) {
    carHolder.innerHTML += carTemplate;
}
</script>

如果你的car.ejs需要传入动态参数，只需要在模板里提前写好占位符（比如{{carName}}），插入前用字符串替换方法替换对应占位符的内容即可。

内容的提问来源于stack exchange，提问作者betteroutthanin