如何在JavaScript中恢复添加子元素后的<div>初始状态？

没有原生的reset()方法可以直接让元素回到初始状态，但可以通过以下几种方式实现需求：

1. 提前保存初始状态 #

页面加载完成后，先把目标元素的初始内容存起来，需要恢复时直接替换回去：

// 页面初始化时保存初始状态
const myList1 = document.getElementById("myList1");
// 两种保存方式选其一：
const initialHTML = myList1.innerHTML; // 保存HTML结构
// 或者保存节点副本（更适合复杂DOM结构）
const initialNode = myList1.cloneNode(true);

// 条件满足时添加子元素
if (你的条件) {
  myList1.appendChild(node);
} else {
  // 恢复初始状态
  myList1.innerHTML = initialHTML;
  // 或者用副本替换：
  // myList1.parentNode.replaceChild(initialNode.cloneNode(true), myList1);
}

2. 给动态元素打标记，批量移除 #

添加子元素时，给它加自定义类或属性，之后只移除带标记的元素：

// 添加子元素时标记
const dynamicNode = node; // 你要添加的节点
dynamicNode.classList.add('only-remove-me'); // 自定义标记类
myList1.appendChild(dynamicNode);

// 条件不满足时移除所有标记元素
if (!你的条件) {
  myList1.querySelectorAll('.only-remove-me').forEach(el => el.remove());
}

3. 保存动态元素的引用，单独移除 #

如果每次只添加一个元素，可以直接存下这个元素的引用，需要时单独移除：

let addedNode = null;

// 添加逻辑
if (你的条件) {
  addedNode = node; // 保存引用
  myList1.appendChild(addedNode);
} else {
  // 只移除添加的那个节点
  if (addedNode && addedNode.parentNode === myList1) {
    addedNode.remove();
    addedNode = null; // 清空引用，避免重复操作
  }
}

另外纠正一下：parent.removeChild(child)只会移除指定的子元素，不会删除所有子元素——你之前可能是误循环移除了所有子节点，或者传入了错误的参数。上面的方法都能精准控制只移除动态添加的内容。

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