使用JavaScript修改DOM文本后，如何恢复元素的原始值？

有几种实用方法可以实现：

• 提前存储原始文本
  在第一次修改元素之前，先把原始文本保存到变量里，之后要重置的时候直接用这个变量赋值就行：

  const labelWelcome = document.querySelector('.welcome');
  // 保存原始文本
  const originalWelcomeText = labelWelcome.textContent;
  // 修改文本
  labelWelcome.textContent = `Welcome back, ${username}`;
  // 需要重置时
  labelWelcome.textContent = originalWelcomeText;
  

• 用元素的自定义数据属性存储原始值
  把原始值绑定到元素自身的dataset属性上，这样原始值和元素关联，不用担心变量作用域问题：

  const labelWelcome = document.querySelector('.welcome');
  // 把原始值存在元素的自定义数据属性中
  labelWelcome.dataset.originalText = labelWelcome.textContent;
  // 修改文本
  labelWelcome.textContent = `Welcome back, ${username}`;
  // 重置时读取存储的原始值
  labelWelcome.textContent = labelWelcome.dataset.originalText;
  

• 重新解析原始HTML（不推荐，仅作补充）
  如果页面没有动态修改过这个元素的结构，也可以重新解析原始的HTML字符串获取初始文本，但这种方法灵活性差，一旦原始HTML变更就会失效：

  // 解析原始HTML片段获取初始文本
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = '<p class="welcome">Log in</p>';
  const originalText = tempDiv.querySelector('.welcome').textContent;
  // 重置文本
  document.querySelector('.welcome').textContent = originalText;
  

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