使用if语句匹配字符串修改HTML内容：支付方式替换异常问题

看起来你在尝试用jQuery替换HTML里的支付方式文本，但遇到了动态新增元素无法替换的问题。我来帮你拆解一下解决方案：

基础场景：初始DOM中的元素替换 #

如果你的支付方式元素是页面加载时就存在的，只需要确保代码在DOM完全就绪后执行，同时做好匹配判断即可：

$(document).ready(function() {
  // 获取目标元素（用ID选择器最精准，因为ID是唯一的）
  const $paymentMethod = $('#paymentMethod');
  // 定义你要匹配的目标支付方式（比如"Credit Card"，替换成实际的opaymethod值）
  const targetMethod = 'Credit Card';

  // 先去除文本前后空格再匹配，避免空格导致判断失败
  if ($paymentMethod.text().trim() === targetMethod) {
    // 替换为目标文本
    $paymentMethod.text('Pending payment');
  }

  // 如果不管原有值是什么，直接替换，去掉if判断就行：
  // $paymentMethod.text('Pending payment');
});

进阶场景：动态新增的元素无法替换 #

如果#paymentMethod是页面加载后通过JS动态添加的（比如异步请求返回后插入DOM），那普通的$(document).ready()就会失效——因为代码执行时元素还不存在。这时候有两种处理方式：

方式1：在元素添加完成后执行替换 #

如果你能控制元素插入的时机，直接在插入DOM的代码后面调用替换逻辑：

// 假设这是动态添加元素的代码
const newPaymentHtml = '<div class="label">Payment Type:</div> <div class="text" id="paymentMethod">[opaymethod]</div>...';
$('.some-container').html(newPaymentHtml);

// 元素添加完成后立即执行替换
const $paymentMethod = $('#paymentMethod');
const targetMethod = 'Credit Card';
if ($paymentMethod.text().trim() === targetMethod) {
  $paymentMethod.text('Pending payment');
}

方式2：用MutationObserver监听DOM变化 #

如果你没办法控制元素插入的时机（比如第三方插件生成的元素），可以用MutationObserver监听DOM变化，当目标元素出现时自动执行替换：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检查是否新增了目标元素
    const $paymentMethod = $('#paymentMethod');
    if ($paymentMethod.length > 0) {
      const targetMethod = 'Credit Card';
      if ($paymentMethod.text().trim() === targetMethod) {
        $paymentMethod.text('Pending payment');
      }
      // 找到元素后可以停止监听，避免重复触发
      observer.disconnect();
    }
  });
});

// 开始监听整个文档的子节点变化（可以把document.body换成更具体的父容器，提升性能）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

常见坑点提醒 #

• 一定要用ID选择器：#paymentMethod是最精准的，避免用类选择器导致匹配到多个元素。
• 记得用trim()：动态生成的文本可能带有前后空格，直接匹配会失败。
• 动态元素要抓准时机：要么在插入后立即执行，要么用观察者监听，别在初始DOM就绪时瞎等。

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