使用全局JavaScript实现：检测商品是否在促销数组并添加促销标识div

我已完成90%的开发工作，目前遇到的问题是：当购物车中的商品SKU属于促销数组时，需要在该商品的product-item-details容器开头添加一个div作为促销提示。受Google O限制，必须仅使用全局JavaScript实现。

现有HTML结构 #

<div class="cart table-wrapper">
  <table id="shopping-cart-table" class="cart items data table">
    <tbody class="cart item"></tbody>
    <div class="product-item-details">
      <strong class="product-item-name"> Item that is on Sale </strong>
      <strong class="product-sku"> Item # 19858836 </strong>
    </div>
    <tbody class="cart item">
      <div class="product-item-details">
        <strong class="product-item-name"> Item that is not on sale </strong>
        <strong class="product-sku"> Item # 20278541 </strong>
      </div>
    </tbody>
  </table>
</div>

当前JavaScript代码 #

const arr = ["Item # 19858836", "Item # 19858837"]; 

const elements = document.getElementsByClassName('product-sku');
const positions = Array.from(elements).map(element => element.innerText);

positions.forEach(function(item){
  if(arr.includes(item)){
    let saleCallout = document.createElement('div');
    saleCallout.id = 'saletime';
    saleCallout.id = 'Extra Money Already Taken Off';
    
    document.querySelector('.product-item-details').appendChild(saleCallout);

    } else {
      //do nothing
    }
})

代码问题分析与修正 #

当前代码存在3个核心问题：

• 重复覆盖id属性，且未正确设置提示文本
• 使用document.querySelector只会选中第一个product-item-details容器，无法定位到当前SKU对应的容器
• 遍历文本数组丢失了DOM元素关联，无法精准操作目标容器

修正后的代码：

const saleSkus = ["Item # 19858836", "Item # 19858837"]; 

// 获取所有SKU元素
const skuElements = document.querySelectorAll('.product-sku');

skuElements.forEach(skuEl => {
  const skuText = skuEl.innerText.trim(); // 去除前后空格，避免匹配失败
  if (saleSkus.includes(skuText)) {
    // 创建促销提示div
    const saleCallout = document.createElement('div');
    saleCallout.className = 'sale-callout'; // 用class标识，方便样式控制
    saleCallout.textContent = 'Extra Money Already Taken Off'; // 设置提示文本
    
    // 定位当前SKU所属的容器
    const detailsContainer = skuEl.closest('.product-item-details');
    // 在容器开头插入提示div
    detailsContainer.insertBefore(saleCallout, detailsContainer.firstChild);
  }
});

修正说明 #

• 遍历DOM元素而非文本数组，保留元素与容器的关联
• 用trim()处理SKU文本，避免空格导致匹配错误
• 设置textContent替代重复赋值id，同时用class标识提示框便于样式定制
• 通过closest()精准定位当前SKU的父容器，确保提示添加到正确位置
• 使用insertBefore将提示插入容器开头，符合需求

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