如何在JavaScript中为所有class为prod-grid的div上方插入新div？

架构老林

2026-8-9

解决方法：为所有prod-grid元素前插入新div

你的代码问题出在两个地方：一是只取了第一个prod-grid元素，二是通过全局判断virtualProdSet-container的数量来控制插入，导致只会执行一次插入操作。以下是修改后的代码，能实现给每个prod-grid元素前都插入目标div：

if (window.location.href.indexOf('/order/prod') !== -1) {
  var insertVirtualProductsPackInterval = setInterval(() => {
    const prodGrids = document.getElementsByClassName('prod-grid');
    // 遍历所有prod-grid元素
    for (let i = 0; i < prodGrids.length; i++) {
      const prodGrid = prodGrids[i];
      // 检查当前prod-grid前面是否已经插入过目标容器
      const hasInserted = prodGrid.previousElementSibling?.classList.contains('virtualProdSet-container');
      if (!hasInserted) {
        const virtualProdSetHTML = '<div class="virtualProdSet-container resp-outerBox" style="display: none;">' +
          '<div class="new-banner"></div>'+
          '</div>';
        prodGrid.insertAdjacentHTML('beforebegin', virtualProdSetHTML);
      }
    }
    // 所有元素都处理完后清除定时器，避免重复执行
    if (document.querySelectorAll('.prod-grid').length === document.querySelectorAll('.virtualProdSet-container').length) {
      clearInterval(insertVirtualProductsPackInterval);
    }
  }, 100);
}