本文详解如何通过 javascript 的 insertadjacenthtml 方法，精准地在 html 表格中“price”单元格正下方插入自定义文本，关键在于插入完整 `
在动态操作 HTML 表格时，直接对某个 <td> 元素调用 insertAdjacentHTML('afterend', ...) 是无效的——因为 <td> 不是独立的块级容器，其父级必须是 <tr>，而 <tr> 又必须位于 <tbody> 或 <thead> 中。因此，若想在某一行（如 .product）的“Price”列下方添加内容，不能只插入一个 <span>，而必须插入一整行 <tr>，并让前三个单元格留空（用 colspan="3" 占位），将目标文本置于第四个 <td> 中，从而实现视觉上“紧贴 Price 下方”的效果。
✅ 正确做法如下：
const productRow = document.querySelector(".product");
productRow.insertAdjacentHTML(
"afterend",
`<tr><td colspan="3"></td><td><span class="price-note">TEXT</span></td></tr>`
);该代码会在 .product 行之后插入一个新行，其中：
- <td colspan="3"></td> 占据前 3 列（Image、Description、Qt），保持结构对齐；
- 第四个 <td> 与 .product__price 列垂直对齐，确保文本出现在 Price 正下方；
- 建议为 <span> 添加语义化类名（如 price-note），便于后续样式控制或测试定位。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素 .product 存在且唯一，否则需使用 querySelectorAll + 循环处理多行；
- 若表格含多个 .product 行，且需为每行 Price 下方插入不同文本，应结合 forEach 动态生成内容；
- 避免在 <thead> 或 <tfoot> 中误插 —— 本例中 <tbody data-order-summary-section="line-items"> 是合法插入上下文；
- 如需支持无障碍访问，可为辅助文本添加 aria-hidden="true" 或包裹在 <small> 中并设置 role="note"。
? 小结：insertAdjacentHTML 的位置参数（如 "afterend"）作用于整个匹配元素，而非其子节点。因此，要实现“某列下方”，本质是“某行之后插入新行+列对齐”，这是表格 DOM 操作的核心逻辑。
