最可行的是动态脚本注入或服务端include或构建工具注入；需确保执行时机（如domcontentloaded）、避免iframe/base等伪方案，以保持dom完整性、样式和语义统一。
用 JavaScript 动态注入 div 到所有页面
直接在每个 HTML 文件里手写重复的 div 不现实，尤其当页面数量多、模板不统一时。最可行的方式是用脚本在 DOM 加载后动态插入——但要注意执行时机和作用域。
常见错误现象：document.getElementById 找不到目标容器、div 插入到 里、脚本执行时 body 还没解析完导致插入失败。
- 把脚本放在
前，或监听DOMContentLoaded事件 - 优先用
document.body.appendChild()或document.body.insertAdjacentElement('beforeend', div)，避免依赖特定 ID - 如果页面已有 CMS 或前端框架（如 React），直接操作
body可能被后续渲染覆盖，需确认挂载时机
用服务端模板统一 include（如 PHP / Node.js / Nginx SSI）
比前端 JS 更可靠，因为内容在响应发出前就已拼装完成，不存在 DOM 时机问题，也绕过浏览器兼容性顾虑。
使用场景：你控制服务器、页面由后端生成（哪怕只是静态文件托管加简单服务端逻辑）。
立即学习“前端免费学习笔记（深入）”；
- PHP：在每个页面末尾加
<?php include 'shared-div.php'; ?> - Nginx + SSI：开启
ssi on，用<!--# include file="shared-div.html" -->（注意路径是相对于 Nginx root） - Node.js（Express）：用
res.render('page', { ... })和模板引擎（如 EJS 的）
性能影响很小，但要求服务端支持对应功能；纯静态托管（如 GitHub Pages、Vercel 静态部署）默认不支持 SSI 或 include，这条路走不通。
用构建工具自动注入（Webpack / Vite / Astro）
如果你的项目有构建流程，这是最干净、可维护性最高的方式——把公共 div 抽成组件，在入口或布局层统一引用，而不是靠运行时“打补丁”。
容易踩的坑：index.html 被当作静态资源直接复制，没经过构建处理，导致注入失效。
- Vite：在
index.html中保留占位符（如<div id="inject-here"></div>），再用插件或transformIndexHtml钩子替换 - Webpack：用
html-webpack-plugin的templateParameters注入 HTML 字符串，或用html-loader引入片段 - Astro：直接在
Layout.astro里写<div class="global-banner">...</div>，所有页面继承该 Layout
别用 `
有人试过用 <base href="..."> 改变资源路径，或用 <iframe src="shared.html"></iframe> 嵌套，这两者都解决不了“把一个 div 嵌套到所有页面”的原始需求。
原因很实在：<base> 只影响相对 URL 解析，对 HTML 结构零作用；<iframe></iframe> 是独立上下文，里面的 div 不属于父页面 DOM，无法被父页面 CSS 选中、JS 访问，也不利于 SEO 和无障碍访问。
真正难的不是“怎么放进去”，而是“放进去之后是否真被当成页面一部分”。很多方案看似能显示内容，实则割裂了样式流、事件流和语义结构。
