✅ 正确做法如下：

const productRow = document.querySelector(".product");
productRow.insertAdjacentHTML(
  "afterend",
  `TEXT`
);

该代码会在 .product 行之后插入一个新行，其中：

• 占据前 3 列（Image、Description、Qt），保持结构对齐；
• 第四个 与 .product__price 列垂直对齐，确保文本出现在 Price 正下方；
• 建议为 添加语义化类名（如 price-note），便于后续样式控制或测试定位。

⚠️ 注意事项：

• 确保目标元素 .product 存在且唯一，否则需使用 querySelectorAll + 循环处理多行；
• 若表格含多个 .product 行，且需为每行 Price 下方插入不同文本，应结合 forEach 动态生成内容；
• 避免在 或 中误插 —— 本例中 是合法插入上下文；
• 如需支持无障碍访问，可为辅助文本添加 aria-hidden="true" 或包裹在 中并设置 role="note"。

? 小结：insertAdjacentHTML 的位置参数（如 "a



fterend"）作用于整个匹配元素，而非其子节点。因此，要实现“某列下方”，本质是“某行之后插入新行+列对齐”，这是表格 DOM 操作的核心逻辑。