通过预先保存原始 innerhtml 并在需要时重新赋值，可快速将被 javascript 修改过的 div 恢复为页面加载时的纯净 html 状态，无需刷新页面或重新解析 dom。
通过预先保存原始 innerhtml 并在需要时重新赋值，可快速将被 javascript 修改过的 div 恢复为页面加载时的纯净 html 状态，无需刷新页面或重新解析 dom。
在前端开发中，常需对某个容器（如 <div class="div1">）动态添加子元素（例如按钮、列表项或表单控件），随后又需将其“重置”回初始 HTML 结构——即页面首次渲染时的状态。注意：这并非清空内容（innerHTML = ''），而是精准还原最初写在 HTML 源码中的结构与文本。
实现的关键在于快照式保存：在任何 JavaScript 修改发生前，捕获该元素的 innerHTML 字符串，并持久化存储（如变量、闭包或模块级常量）。后续只需一行赋值即可完成还原：
const originalDiv = document.querySelector('.div1');
const savedHTML = originalDiv.innerHTML; // ✅ 保存初始结构（含所有子标签、文本、属性）
// 后续操作：动态添加元素
originalDiv.insertAdjacentHTML('beforeend', '<span class="added">New item</span>');
originalDiv.appendChild(document.createElement('hr'));
// 需要还原时：
originalDiv.innerHTML = savedHTML; // ✅ 完全恢复原始 HTML，包括注释、空白符（若原 HTML 中存在）⚠️ 注意事项：
- innerHTML 不保留绑定的事件监听器、JavaScript 对象引用或表单控件的当前值（如 <input> 的 value 属性）；若需保留用户输入状态，应额外缓存 value/checked 等属性。
- 若原始 HTML 包含 <script> 标签，innerHTML 赋值不会重新执行其中脚本（这是安全机制，避免重复执行风险）。
- 如需深度还原（包括自定义属性、dataset、CSS 类等运行时变更），建议使用 cloneNode(true) 预先克隆整个节点并缓存，再用 replaceWith() 替换——但对纯结构还原，innerHTML 方案更轻量、高效。
总结：这是一种零依赖、原生可靠、性能优异的 DOM 重置策略，适用于表单重置、编辑器撤销点、组件状态回滚等场景。只要确保 savedHTML 在首次修改前完成捕获，即可随时一键回归“纯净起点”。
立即学习“前端免费学习笔记（深入）”；
