为什么要做 HTML 转 JS
前端开发中，常遇到把一段静态 HTML 变成 JS 可操作代码的场景：组件封装、服务端返回片段后动态渲染、富文本内容插入、旧页面迁移到框架。直接复制 HTML 进 JS 文件会报错，需要理解转换的几种思路。
方法一：模板字符串包裹
最直接的方式是用反引号把 HTML 包起来，赋给变量或函数返回值。
const tpl = `
标题
内容
`;
document.body.innerHTML = tpl;
优点是改动小、可读性接近原 HTML。注意三点：反引号内出现的反引号要转义；${} 会被当作插值，若原 HTML 含 $ 需写成 \$；多行缩进会原样保留，可能影响渲染空白。
方法二：DOM API 逐节点创建
需要动态绑定事件或频繁更新时，用 document.createElement 更稳妥。
const card = document.createElement(‘div’);
card.className = ‘card’;
const h2 = document.createElement(‘h2’);
h2.textContent = ‘标题’;
card.appendChild(h2);
这种方式不解析 HTML 字符串，天然规避 XSS 风险，也方便挂载监听器。缺点是代码量随结构增长，嵌套深时冗长。可配合 cloneNode 复用已有模板。
方法三：工具自动转换
结构复杂时，可借助构建工具或在线转换器。常见思路有：
- 用
html-loader把 HTML 文件转成 JS 模块导出字符串； - 用 Babel 插件把 JSX 编译为
createElement调用； - 用在线工具把 HTML 片段批量转成模板字符串或 DOM 代码。
工具适合一次性迁移，但生成代码往往冗余，建议转换后再人工整理。
转义与安全要点
无论哪种方法，只要最终走 innerHTML，就要处理用户输入。原则是：能 textContent 就不 innerHTML；必须插 HTML 时先转义 &、<、>、"、'，或使用成熟库的 sanitize 能力。属性值中的引号冲突也要提前替换。
性能与可维护性
频繁拼接大段 HTML 再一次性写入，比多次 appendChild 更省重排。反过来，需要局部更新时，DOM API 的细粒度控制更有优势。工程上建议把模板抽成独立函数或模块，保持 HTML 结构与 JS 逻辑分离，便于后续替换为组件框架。
小结
HTML 转 JS 没有唯一答案：简单静态片段用模板字符串，需交互和安全性用 DOM API，大规模迁移用工具转换。理解各自边界，再结合转义与性能取舍，才能写出干净可靠的代码。
