使用JavaScript修改DOM中的文本内容后如何改回原始值答案

【问题标题】：How can I change back the original value after modifying the text content in DOM with JavaScript使用JavaScript修改DOM中的文本内容后如何改回原始值
【发布时间】：2023-01-03 22:17:48
【问题描述】：

这是原始值，

<p class="welcome">Log in</p>

然后我在 DOM 中将其更改为“欢迎回来，用户名”：

const labelWelcome = document.querySelector('.welcome')
labelWelcome.textContent = `Welcome back, ${username}`

但是我怎样才能把它改回“登录”呢？

这样好像已经完全改变了原来的值，只能通过修改文本才能改回来。

有没有办法重置为原始值？

【问题讨论】：

只有一个.textContent。如果您更改它，则只剩下更改后的值。
改回来有什么问题？ document.querySelector('.welcome').textContent = 'Log in'
在更改 .textContent 之前，将旧值存储在 data-* 属性中。因此您稍后可以在脚本中检索该值。

标签： javascript dom

【解决方案1】：

不会保留历史值，因为您将覆盖 textContent 的值。如果您需要访问原始值，您需要将其存储在某个变量中（取决于您的项目），然后使用该值来确定第二次更新 textContent 的内容。

这样做的一种方法是将值写入元素上的数据属性，可以使用数据集属性访问该属性，例如：

labelWelcome.dataset.originalTextContent = element.textContent;
labelWelcome.textContent = "Welcome back";
labelWelcome.textContent = labelWelcome.dataset.originalTextContent;

【讨论】：

【解决方案2】：

您可以将原始值存储为 const 并在需要时设置。

const originalValue = 'Log in'

【讨论】：