本文详解如何使用 insertadjacenthtml() 在表格中动态插入文本，并精准定位到 price 列下方（而非整行后），通过构造新
在 HTML 表格中，若想将一段文本（如说明、折扣提示或附加信息）严格显示在 Price 单元格正下方，仅对 .product 元素调用 insertAdjacentHTML('afterend', ...) 是不够的——因为 .product 是一个
关键在于：Price 是第 4 列（ ✅ 正确效果： ⚠️ 注意事项： 立即学习“前端免费学习笔记（深入）”； 总结：表格 DOM 操作的核心是尊重列结构。insertAdjacentHTML 的强大之处在于它能精准控制插入位置，但必须配合正确的 HTML 片段结构——这里，“一行四列 → 前三列合并留空 → 第四列承载内容”是最简洁、健壮且可维护的实现方式。），因此新插入的行必须让前 3 列“留空占位”，仅在第 4 列渲染文本。这需要插入一个结构完整的
，其中前三列用 合并占据前三个逻辑列宽，第四列则放置目标文本： const productRow = document.querySelector(".product");
productRow.insertAdjacentHTML(
"afterend",
`<tr><td colspan="3"></td><td><span class="price-note">TEXT</span></td></tr>`
);
，其 afterend 会插入到当前
之后（即同一行的下一列位置），破坏布局；
