动态DOM元素替换问题：无法定位含动态用户名的<li>元素

方法1：通过文本内容匹配定位（原生JS） #

如果这个

// 获取所有li元素，转换成数组后筛选
const targetLi = Array.from(document.querySelectorAll('li')).find(li => 
  li.textContent.includes('marcus001')
);

// 找到后替换内容（innerHTML支持HTML，textContent适合纯文本）
if (targetLi) {
  targetLi.innerHTML = '<div class="new-item">替换后的完整内容</div>';
  // 或者用纯文本替换：targetLi.textContent = '替换后的纯文本内容';
}

方法2：结合父元素缩小范围（更精准） #

如果页面上有多个

），再在范围内筛选，避免误匹配：

// 先找到固定的父容器
const userListContainer = document.querySelector('.user-list');
if (userListContainer) {
  // 在父容器内筛选目标li
  const targetLi = Array.from(userListContainer.querySelectorAll('li')).find(li => 
    li.textContent.includes('marcus001')
  );
  
  if (targetLi) {
    targetLi.innerHTML = '你的新内容';
  }
}

方法3：处理异步生成的元素（MutationObserver） #

如果这个

• 是通过AJAX、前端框架渲染等异步方式添加到页面的，直接查找可能找不到，这时候可以用MutationObserver监听父容器的变化，等元素出现后再操作：

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查新增的节点里有没有目标li
      const targetLi = Array.from(mutation.addedNodes).find(node => 
        node.tagName === 'LI' && node.textContent.includes('marcus001')
      );
      
      if (targetLi) {
        // 替换内容
        targetLi.innerHTML = '<span>这是替换后的动态内容</span>';
        // 找到后停止监听，避免重复操作
        observer.disconnect();
      }
    });
  });
  
  // 监听目标父容器的子节点变化（根据实际情况替换选择器）
  observer.observe(document.querySelector('.user-list'), {
    childList: true,
    subtree: true
  });
  

  额外提示 #

  如果用户名可能重复，可以结合

• 内的其他特征（比如头像元素、特定class）来强化筛选条件，比如：

  const targetLi = Array.from(document.querySelectorAll('li')).find(li => 
    li.textContent.includes('marcus001') && li.querySelector('.user-avatar')
  );
  

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