Saya mempunyai fungsi menukar elemen DOM berikut menggunakan JavaScript biasa, di mana saya menggunakan acara pemuatan halaman untuk menukar elemen span yang mengandungi beberapa rentetan teks DOM.

Menggunakan kod berikut, elemen DOM akan berubah seperti yang dijangkakan. Walau bagaimanapun, mereka masih akan melihat bahagian terkecil desktop 和 mobile berkelip sehingga elemen DOM pembolehubah berubah.

Contoh adegan kelipan:

• Saya melihat julat tag "Teks yang saya mahu tukar" dalam sepersekian saat.
• Selepas kandungan dimuatkan sepenuhnya, saya melihat julat tag yang diubah "teks1 ditukar".

Saya rasa ini berlaku kerana perubahan DOM digunakan apabila kandungan DOM halaman dimuatkan sepenuhnya. Saya mahu menyembunyikan elemen label sedia ada sehingga perubahan digunakan dan kemudian menunjukkannya.

Struktur elemen desktop 和 mobile yang saya ingin kendalikan adalah seperti berikut:

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

Lihat konsep berikut:

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();

Adakah terdapat cara untuk menyembunyikan elemen DOM dahulu sehingga perubahan pada elemen sedia ada digunakan, dan kemudian menunjukkannya?

Saya sedang berfikir untuk menggunakan peraturan CSS sebaris seperti ini:

Tetapan.style.visbility='hidden'，当文本内容改变时用.style.visbility='visble'Paparan.

Tetapi saya tidak pasti bagaimana untuk melaksanakan penyelesaian ini dengan betul dalam kod saya.