JavaScript代码执行顺序异常：后续命令先于前序操作完成

首先纠正你的误解：这两行代码都是同步执行的，JS是单线程语言，代码会从上到下按顺序执行，不存在你以为的“异步命令”情况。

问题的核心出在document.body.innerHTML = document.body.innerHTML.replace('pixlframe', 'iframe')这一行：
当你给body.innerHTML重新赋值时，浏览器会同步执行以下操作：

• 销毁当前body下的所有DOM元素（包括你的按钮）
• 将新的HTML字符串重新解析成DOM树，插入到body中

所以执行完这一行后，原来的mypxlbtn按钮已经被销毁了。后续的隐藏操作实际上是在操作新创建的按钮元素（因为新HTML里仍包含按钮代码），但此时浏览器可能还未完成新DOM的渲染，或者新按钮的样式为默认状态，导致你产生“隐藏操作提前触发”的错觉。

方案1：调整执行顺序（最简单） #

先隐藏按钮，再替换innerHTML。旧按钮先被隐藏，之后被销毁，新按钮创建时不会显示出来：

function myPXFDFunction() {
  // 先隐藏按钮
  document.getElementById('mypxlbtn').style.visibility = 'hidden';
  // 再替换DOM元素
  document.body.innerHTML = document.body.innerHTML.replace('pixlframe', 'iframe');
}

方案2：精准操作DOM（更高效，推荐） #

不要修改整个body的innerHTML，直接定位pixlframe元素并替换为iframe，这样不会影响其他DOM元素（包括按钮），性能更优：

function myPXFDFunction() {
  // 找到目标元素
  const pixlFrame = document.querySelector('pixlframe');
  if (pixlFrame) {
    // 创建新iframe元素
    const iframe = document.createElement('iframe');
    // 复制原元素的所有属性
    iframe.src = pixlFrame.src;
    iframe.width = pixlFrame.width;
    iframe.height = pixlFrame.height;
    iframe.scrolling = pixlFrame.scrolling;
    iframe.frameBorder = pixlFrame.frameBorder;
    // 替换原元素
    pixlFrame.replaceWith(iframe);
  }
  // 隐藏按钮
  document.getElementById('mypxlbtn').style.visibility = 'hidden';
}

这个方案不会销毁按钮，隐藏操作能稳定生效，同时避免了整个body的重新渲染，是更合理的实现方式。

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