JS调用replace修改innerHTML未生效，页面元素无变化如何解决？

问题根因 #

• String.replace() 是纯字符串方法，仅返回替换后的新字符串，不会修改原字符串本身，你没有把替换后的结果重新赋值给DOM元素的innerHTML属性，所以页面元素不会更新。
• 直接全量匹配整个HTML片段的写法容错率极低，只要原始HTML存在空格、换行、属性顺序的微小差异都会导致匹配失败，替换不生效。

正确实现方案 #

方案1：直接修改目标文本（推荐，稳定性更高） #

直接定位到文本所在的.cart-item-label元素，仅修改文本内容，不需要处理复杂的HTML结构：

// 定位到文本标签元素
const fuelLabel = document.querySelector('.ducp-component-cart-item.cart-item.YQ.sm .cart-item-label');
// 替换完成后重新赋值给元素文本属性
fuelLabel.textContent = fuelLabel.textContent.replace(' - non-refundable', '');

方案2：修改父级innerHTML（需重新赋值） #

如果你需要操作父级元素的innerHTML，要把替换后的结果重新赋值回对应属性：

const targetParent = document.querySelector('.ducp-component-cart-item.cart-item.YQ.sm').children[0].children[0];
targetParent.innerHTML = targetParent.innerHTML.replace('Airline Fuel Fee - non-refundable (YQ)', 'Airline Fuel Fee (YQ)');

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