我使用普通 JavaScript 有以下 DOM 元素更改函数，其中我使用页面加载事件更改包含 DOM 的某些文本字符串的 span 元素。

使用以下代码，DOM 元素将按预期更改。但是，在变量 desktop 和 mobile 的 DOM 元素更改之前，他们仍然会看到最小部分的闪烁。

闪烁场景示例：

• 我在几分之一秒内看到了标签范围“我想更改的文本”。
• 内容完全加载后，我看到更改后的标签范围“text1 已更改”。

我认为发生这种情况是因为当页面的 DOM 内容完全加载时会应用 DOM 更改。我想隐藏现有的标签元素，直到应用更改，然后显示它们。

我想要操作的 desktop 和 mobile 的元素结构如下：

<span class="first-headline target-span">Text I want to change</span>

请参阅以下概念：

var changesObj = {
  "us": {
    title: "text1 changed"
  },
  "eu": {
    title: "text2 changed"
  }
};

function changes() {
  var webshop = changesObj[window.location.pathname.split('/')[1]];
  console.log(webshop);
  var changesText;
  if (!webshop) {
    console.log('webshop not found');
  }
  changesText = webshop.title;
  
  if (document.querySelector('.target-span').innerText.length > 0) {
    var desktop = document.querySelector('.target-span');
    console.log(desktop);
    desktop.innerText = changesText;
    console.log(desktop.innerText);
    console.log("applied changes for dekstop");
  }
  if (document.querySelector('.target-span').innerText.lenght > 0) {
    var mobile = document.querySelector('.target-span');
    mobile.innerText = changesText;
    console.log(mobile.innerText);
    console.log("applied changes for mobile");
  }
}

function invokeChanges() {
  document.addEventListener("DOMContentLoaded", function () {
    changes();
  });
}

invokeChanges();

有没有办法先隐藏 DOM 元素，直到应用了对现有元素的更改，然后再显示它？

我正在考虑使用如下内联 CSS 规则：

设置.style.visbility='hidden'，当文本内容改变时用.style.visbility='visble'显示。

但我不确定如何在我的代码中正确实现该解决方案。