如何在vanila JS中使用html模板文件作为js变量

问题描述

通常我们可以像这样写js代码给模板赋值给变量；

var tmpl = '<div>...</div>'

如果我在不同的html文件中引入了html模板，我们可以直接在js文件中导入和加载那个(dom)文件作为变量吗？。 我要求我有多个带有各自模板的 html 文件，我必须在 js 变量中获取该模板并动态加载它。

解决方法

当然：

let variable;
fetch('/file/link.html').then(r => r.text()).then(t => variable = t) ;

最好只在 then 函数内部使用模板，而不是将它分配给它外部的变量。原因是因为您可以在设置变量之前尝试使用它。

更直接的替代语法是 async/await；但这不像 promise 那样得到广泛支持。