WordPress中insertAfter刷新时偶发失效，如何等待元素加载后执行脚本？

这确实是前端开发里很常见的动态元素加载时机问题！你的推测完全正确——脚本有时候会在目标元素.promoted-products-box还没被渲染到DOM中就执行了，自然找不到元素，导致移动操作失败。另外先提个小细节：你原代码里的选择器$("promoted-products-box")少了类名前缀.，应该写成$(".promoted-products-box")，这个小失误也可能影响执行成功率哦！

下面给你几种靠谱的解决方案，按适用场景排序：

1. 等待所有页面资源加载完成（适合静态渲染的元素） #

如果.promoted-products-box是页面静态HTML的一部分，只是加载顺序靠后，可以把脚本从document.ready换成window.load，它会等待所有资源（包括图片、样式表）都加载完成后再执行：

jQuery(window).on('load', function($) {
  $(".promoted-products-box").insertAfter(".top-rated-prod-position");
});

2. 使用MutationObserver监听DOM变化（适合动态加载的元素） #

如果这个元素是通过AJAX、前端框架动态渲染出来的，上面的方法就失效了。这时可以用MutationObserver监听DOM的变化，一旦目标元素出现就执行操作：

jQuery(document).ready(function($) {
  // 目标元素的选择器
  const targetSelector = ".promoted-products-box";
  // 监听整个文档的DOM变化
  const observer = new MutationObserver(function(mutations) {
    // 检查目标元素是否已存在
    const targetElement = $(targetSelector);
    if (targetElement.length > 0) {
      targetElement.insertAfter(".top-rated-prod-position");
      // 找到元素后停止监听，避免重复执行
      observer.disconnect();
    }
  });

  // 配置监听选项：监听子节点添加和属性变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

3. 轮询检查元素是否存在（简单粗暴的兼容方案） #

如果上面的方法对你的场景来说太复杂，也可以写一个简单的轮询函数，定期检查元素是否存在，直到找到为止：

jQuery(document).ready(function($) {
  const moveElement = function() {
    const targetElement = $(".promoted-products-box");
    if (targetElement.length > 0) {
      targetElement.insertAfter(".top-rated-prod-position");
    } else {
      // 每500毫秒检查一次，可根据实际调整间隔
      setTimeout(moveElement, 500);
    }
  };
  // 启动轮询
  moveElement();
});

推荐优先用第一种（如果是静态元素），如果是动态加载的元素，优先用MutationObserver，它比轮询更高效。

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