innerHTML 的工作原理
当设置 element.innerHTML = '...' 时，浏览器会：
- 解析提供的HTML字符串
- 移除该元素的所有现有子节点
- 用新解析的节点替换它们
重置函数代码:
function resetElements() {
if (confirm('确定要重置所有元素吗？')) {
elementsContainer.innerHTML = '<p>添加的元素将显示在这里...</p>';
elementCount = 0;
counterValue.textContent = '0';
}
}
if (confirm('确定要重置所有元素吗？')) {
elementsContainer.innerHTML = '<p>添加的元素将显示在这里...</p>';
elementCount = 0;
counterValue.textContent = '0';
}
}
关键点:
- elementsContainer.innerHTML = ... 这一行代码会自动删除所有现有元素
- 浏览器在解析新HTML之前会先清空容器
- 这是一种高效清除DOM元素的常用方法
- 不需要手动删除每个元素，因为浏览器会处理
当前elementCount值: 0
演示
在下方输入文本并点击"添加元素"按钮，然后尝试重置。
添加的元素将显示在这里，每个都有唯一的ID