添加DOM元素并克隆后，如何将HTML创建的div恢复至初始纯净状态？

你可以通过两种实用方式实现需求，核心逻辑是提前保存div的纯净初始状态，后续需要恢复时直接复用这个状态：

方法1：保存初始HTML内容 #

页面加载完成后，立刻把目标div的初始innerHTML存入变量，恢复时直接将该值重新赋值给div的innerHTML即可。这种方式适合结构简单、无复杂事件绑定的场景。

示例代码：

<!-- 你的初始HTML结构 -->
<div id="myDiv">
  <p>这是初始内容</p>
</div>

<script>
// 页面加载后立即保存初始状态
const myDiv = document.getElementById('myDiv');
const originalContent = myDiv.innerHTML;

// 模拟后续添加元素的操作
myDiv.appendChild(document.createElement('button'));
myDiv.innerHTML += '<div>新增的测试内容</div>';

// 克隆已修改的div
const clonedDiv = myDiv.cloneNode(true);

// 恢复初始状态的函数
function resetDiv() {
  myDiv.innerHTML = originalContent;
}

// 调用函数恢复
resetDiv();
</script>

方法2：提前克隆初始状态的节点 #

如果你的div带有复杂DOM结构，或者需要保留初始元素的引用，可以在页面加载后直接克隆一个纯净状态的div副本，恢复时用这个副本替换当前div，或者清空当前div后插入副本内容。

示例代码：

<!-- 初始HTML -->
<div id="myDiv">
  <p>这是初始内容</p>
</div>

<script>
// 页面加载时克隆初始状态的节点（true表示深克隆，包含所有子元素）
const myDiv = document.getElementById('myDiv');
const originalClone = myDiv.cloneNode(true);

// 模拟添加元素操作
myDiv.appendChild(document.createElement('span'));
myDiv.innerHTML += '<p>新增内容</p>';

// 克隆修改后的div
const clonedDiv = myDiv.cloneNode(true);

// 恢复初始状态
function resetDiv() {
  // 方式一：直接替换当前节点（需重新克隆originalClone，避免原副本被移动）
  myDiv.parentNode.replaceChild(originalClone.cloneNode(true), myDiv);
  
  // 方式二：清空当前div后插入初始内容
  // myDiv.innerHTML = '';
  // Array.from(originalClone.cloneNode(true).children).forEach(child => {
  //   myDiv.appendChild(child);
  // });
}

// 调用恢复
resetDiv();
</script>

关键注意点 #

• 若div元素通过addEventListener绑定了事件，innerHTML和cloneNode都不会保留这些事件，恢复后需要重新绑定，或者提前使用事件委托（把事件绑定到父元素）来规避这个问题。
• 务必确保在页面DOM完全加载后再保存初始状态，比如把代码放在DOMContentLoaded事件回调里，或者放在HTML结构末尾，避免无法获取目标div。

内容的提问来源于stack exchange，提问作者Jokdeniz_07