HTML拼接需按场景选择服务端预编译、构建时合并或运行时注入；错误使用易致结构错乱、XSS或解析失败，须严格转义用户输入、规范路径处理及DOM操作。
直接拼接 HTML 片段或文件不是“加号一连就完事”，关键看场景：是服务端预编译、构建时静态合并，还是运行时动态注入？不同阶段用错方法，轻则结构错乱，重则 XSS 或解析失败。
用 innerHTML 拼接片段时，必须先转义或信任内容
浏览器不会自动过滤字符串里的 HTML 标签。若拼接用户输入或未校验的变量，innerHTML += ' 会执行其中的 ' + userText + '' 或事件属性。
- 安全做法：用
textContent插入纯文本；若必须渲染 HTML，用DOMParser或template元素做可控解析 - 常见错误：把含引号、换行的多行 HTML 字符串直接塞进
innerHTML，导致 JS 语法报错或标签截断 - 注意：拼接后需手动调用
element.querySelectorAll('script')并eval（不推荐）或重新绑定事件——原生拼接不触发脚本执行
const template = document.createElement('template');
template.innerHTML = '' + escapedContent + '
';
document.body.appendChild(template.content.cloneNode(true));Node.js 里用 fs.readFileSync 合并多个 HTML 文件要处理编码和路径
直接 Buffer.concat 或字符串拼接容易忽略 BOM、换行符差异、相对资源路径失效等问题。
立即学习“前端免费学习笔记（深入）”；
- 统一用
utf8编码读取：fs.readFileSync(file, 'utf8')，避免 Windows 的utf8-bom导致开头乱码 - 合并前检查是否含
、、—— 多个文件重复定义会破坏文档结构 - 图片/CSS/JS 路径默认按原始文件位置解析，合并后需用正则替换为相对根路径，例如
src="img/a.png"→src="/static/img/a.png"
const html1 = fs.readFileSync('./header.html', 'utf8');
const html2 = fs.readFileSync('./content.html', 'utf8');
const html3 = fs.readFileSync('./footer.html', 'utf8');
// 手动剔除重复的 等顶层标签
const fullHtml = html1.replace(/]*>|<\/html>/gi, '')
+ html2.replace(/]*>|<\/body>/gi, '')
+ html3; Webpack/Vite 构建时拼接 HTML，优先用插件而非手写字符串
靠 html-webpack-plugin 或 vite-plugin-html 注入模板，比在 JS 里拼接更可靠，还能支持变量替换、压缩、hash 等能力。
-
html-webpack-plugin的template选项支持 EJS、Pug 等模板引擎，可直接 - Vite 下用
vite-plugin-html的inject配置可插入 JSON 数据，但不能直接include文件——得配合transformIndexHtml钩子读取并注入 - 不要在
index.html里写：现代打包工具会剥离内联脚本，且违反 CSP
服务端模板（如 EJS、Nunjucks）拼接最简单，但要注意上下文逃逸
模板引擎默认对变量插值做 HTML 转义，比如 是转义的， 是不转义的——后者若来源不可信，立刻引入 XSS。
- EJS 中
是同步包含，路径基于当前模板所在目录 - Nunjucks 的
{% include "header.html" %}支持继承（{% extends "base.html" %}），更适合大型页面拆分 - 所有 include 的子模板共享父模板作用域，变量名冲突很常见，建议用命名空间对象传参，如
{ header: { title: 'xxx' } }
拼接本身不难，难的是拼完之后 DOM 是否有效、资源是否可加载、内容是否可信——别只盯着“连起来”，得盯住结果是否能被浏览器正确解析和执行。
