HTML5无动态布局切换API，本质是JS驱动DOM操作与CSS控制；推荐用classList切换预设语义化布局类，慎用innerHTML，按需加载可用template或fetch+DOMParser，并同步管理状态。
HTML5 本身没有“动态加载布局”或“布局切换”的内置 API，所谓“动态切换布局”，本质是 DOM 操作 + CSS 控制 + 可选的异步资源加载。别被标题里的“HTML5 布局代码”误导——HTML 是结构，不是逻辑；切换动作必须靠 JavaScript 驱动，CSS 负责呈现差异。
用 classList 切换预设的 CSS 布局类最轻量
多数场景下，“切换布局”只是改变容器的尺寸分配、排列方向或可见区域，比如从单栏变双栏、侧边栏收起/展开。这时不需要重新加载 HTML，只需切换已定义好的 CSS 类：
- 在 CSS 中预先写好几套布局规则，如
.layout-grid-2col、.layout-flex-sidebar-collapsed - 用 JavaScript 操作元素的
classList，例如：document.body.classList.toggle('layout-sidebar-hidden') - 避免直接改
style属性，否则难以维护、无法利用 CSS 过渡动画 - 注意 class 名要有语义，别用
style1/style2这类无意义命名
用 innerHTML 或 insertAdjacentHTML 替换局部结构要谨慎
如果真需要替换整块 HTML（比如切换仪表盘 vs 表格视图），可以用 JS 动态写入新结构，但风险明显：
-
innerHTML = newHTML会销毁原节点下的所有绑定事件和状态（比如输入框内容、自定义组件实例） - 推荐用
element.insertAdjacentHTML('beforeend', htmlStr)配合手动清理旧节点，控制粒度更细 - 若 HTML 字符串来自后端或用户输入，必须做转义，否则引发 XSS —— 别直接拼接
userInput到 HTML 字符串里 - 频繁操作
innerHTML会影响性能，尤其是大段结构；可考虑用DocumentFragment批量插入
按需加载布局模板要用 fetch + template 标签
当不同布局对应完全独立的 HTML 片段（比如多个 SPA 子视图），可把它们存为单独文件或 <template> 块，再动态加载：
立即学习“前端免费学习笔记（深入）”；
- 把布局 HTML 写在
<template id="layout-dashboard">...</template>中，用document.getElementById('layout-dashboard').content.cloneNode(true)复用 - 从外部文件加载：用
fetch('/layouts/profile.html')获取字符串，再用DOMParser解析成节点（注意 MIME 类型和跨域） - 别用
document.write()或<script src="xxx.html">加载 HTML——不合法，会破坏页面解析流 - 加载后记得手动初始化该布局里的交互逻辑（比如按钮事件绑定），因为脚本不会自动执行
真正难的从来不是“怎么切”，而是“状态怎么同步”：路由变化时布局切换了，但表单数据、滚动位置、焦点元素是否保留？这些细节不处理，用户会觉得页面“闪”或“丢东西”。别只盯着 HTML 和 CSS，得想清楚 JS 状态生命周期怎么配合。
