如何在 JS 中嵌入 HTML 代码

2024-12-01 03:36:51

推荐回答（2个）

回答1：

大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。

我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：

var html = Template.load('/template/foo.html');
var target = document.getElementById('xxx');
target.innerHTML = html;
Template 是一个工具类，负责发送同步 XHR 请求并返回结果。

这样在开发的时候，模板文件和 JS 代码分离，非常好维护。

当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。

比如上面的代码被打包工具跑一下就变成了：

var html = "

"; // 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成
var target = document.getElementById('xxx');
target.innerHTML = html;

回答2：

思路，在JS中定义要嵌入的html代码，然后通过js进行嵌入即可。

 
 
 
 
 
Insert

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；如：

这是内容

，可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。