求助：无法修改id为product_info内的按钮文本

问题分析与解决方法 #

你提供的HTML中，id="product_info"的<tbody>初始是空的，按钮应该是后续通过JS动态生成（比如AJAX加载、模板渲染）的。直接写静态脚本无法修改文本，核心原因是修改脚本执行时，目标按钮还未被添加到DOM中。以下是几种可行的解决方案：

1. 轮询等待按钮加载完成 #

适合按钮通过异步请求（如AJAX）加载的场景，定时检查元素是否存在，找到后修改文本：

document.addEventListener('DOMContentLoaded', function() {
  const checkInterval = setInterval(() => {
    // 精准定位tbody内的按钮，可根据实际情况添加class/id筛选
    const targetBtn = document.querySelector('#product_info button');
    if (targetBtn) {
      targetBtn.textContent = '你的新按钮文本';
      clearInterval(checkInterval); // 找到元素后停止轮询
    }
  }, 200); // 每200毫秒检查一次
});

2. 监听DOM变化（优雅方案） #

使用MutationObserver监听product_info的子元素变化，一旦按钮被添加到DOM中立即修改：

const productInfo = document.getElementById('product_info');
if (productInfo) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        const btn = mutation.target.querySelector('button');
        if (btn) {
          btn.textContent = '你的新按钮文本';
          observer.disconnect(); // 修改完成后停止监听，避免重复触发
        }
      }
    });
  });

  // 监听tbody的子元素添加/删除变化
  observer.observe(productInfo, { childList: true, subtree: true });
}

3. 直接在按钮生成后修改 #

如果是你自己编写的JS代码生成按钮，在创建并插入按钮后直接修改文本：

// 示例：动态生成按钮的代码
const actionBtn = document.createElement('button');
actionBtn.textContent = '原始文本';
document.getElementById('product_info').appendChild(actionBtn);

// 紧接着修改按钮文本
actionBtn.textContent = '你的新按钮文本';

关键注意点 #

• 确保选择器精准：如果按钮有专属class或id，比如<button class="delete-btn">，用#product_info .delete-btn定位，避免误改其他按钮
• 脚本执行顺序：不要在DOM元素生成前运行修改代码，否则会因找不到元素而失效

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