JS修改按钮文本后内容被遮挡，如何让新字符串显示在最上层？

你当前代码的问题在于直接修改按钮元素的innerHTML，会把按钮内原本包裹文本的<span>标签完全覆盖，替换为无标签包裹的纯文本。你的CSS规则仅对.ButtonMain下的<span>设置了position: relative，确保文本层级高于按钮的伪元素动画层，没有<span>包裹的文本默认层级低于绝对定位的伪元素，因此会被遮挡。

修复方案 #

方案1：最小改动，赋值时保留span标签

function myFunction() {
  document.getElementsByClassName("demo")[0].innerHTML = "<span>Copied</span>";
  setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "<span>Changing Back</span>"; }, 1000);
}

方案2：更稳妥的写法，直接操作span元素修改文本

不会破坏原有DOM结构，也避免XSS风险：

function myFunction() {
  const btnText = document.querySelector(".demo span");
  btnText.textContent = "Copied";
  setTimeout(function(){ 
    btnText.textContent = "Changing Back"; 
  }, 1000);
}

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