当我们在前端开发中使用 JavaScript 修改一个 div 元素的内容、样式或属性时，有时候需要在之后将其还原回原始状态。本文将介绍一些方法来实现这个目标。
方法 1：使用 HTML 标记和 CSS 样式
一种简单的方法是将需要修改的 div 元素包裹在一个父级元素内，并使用 CSS 伪类选择器 :empty 和 :not(:empty) 来分别定义空和非空状态的样式：
-- -------------------- ---- -------
---- ------------
---- ------------------------
------
-------
------------------- ------- -
-- -------- --
-
------------- ------- -
-- ------- --
-
--------然后，在 JavaScript 中可以通过清空父级元素的 innerHTML 属性来重置目标元素：
const parent = document.querySelector('#parent');
parent.innerHTML = '';方法 2：使用 cloneNode() 方法
另一种方法是使用 Node 接口提供的 cloneNode() 方法创建一个目标元素的副本，并用副本替换原先的元素。这样可以保留元素的初始状态，包括子节点、属性和事件监听器等。
-- -------------------- ---- ------- ---- ------------------------ -------- ----- ------ - ---------------------------------- ----- ----- - ----------------------- -- -------------- ------------------------------------- -------- ---------
方法 3：使用属性保存原始状态
还有一种方法是使用元素的自定义属性来保存其初始状态，然后在需要重置时再将其赋值回去。
-- -------------------- ---- ------- ---- ----------- ------------------------------------------ -------- ----- ------ - ---------------------------------- ----- ------------ - ------------------------------------------ -- -------------- ------------------ - ------------- ---------
总结
以上三种方法都可以实现将一个 div 元素重置为其原始状态。其中第一种方法适用于样式和结构的修改，第二种方法适用于复杂的操作，而第三种方法则适用于简单的属性修改。开发者可以根据具体需求选择不同的方法来实现重置元素的目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26109