如何使用insertAdjacentHTML在价格下方插入文本？

问题分析 #

你当前的代码选中了整个产品行（<tr class="product">），并在该行末尾插入文本，导致文本显示在整个产品行下方，而非价格区域内。要实现在$us21,00下方插入文本，需要定位到价格所在的元素内部操作。

修正后的代码 #

方案1：在价格所在单元格内插入（推荐）

此方案将文本放在价格文本的下方，属于同一个价格单元格内：

// 定位到价格所在的td元素
const priceCell = document.querySelector(".product__price");
// 在单元格内部末尾插入文本，即价格文本的下方
priceCell.insertAdjacentHTML("beforeend", `<span>TEXT</span>`);

方案2：精准定位到价格文本的span后插入

如果需要严格紧跟价格文本的span元素之后插入：

// 定位到显示价格的span元素
const priceText = document.querySelector(".product__price .order-summary__emphasis");
// 在该span元素之后插入文本
priceText.insertAdjacentHTML("afterend", `<span>TEXT</span>`);

关键说明 #

• insertAdjacentHTML参数含义：
  • beforeend：在目标元素内部末尾插入内容
  • afterend：在目标元素外部后面插入内容
• 若需要自定义样式，可给插入的span添加类名，例如：<span class="custom-price-note">TEXT</span>，再通过CSS调整样式。

内容的提问来源于stack exchange，提问作者streaming-coc