如何通过JavaScript为动态生成的<li>添加对应<a>文本的CSS类

基础场景（元素已生成在DOM中） #

如果目标<ul>已经存在于页面中，直接执行以下代码即可：

// 选中目标ul下的前两个li
const firstTwoLis = document.querySelectorAll('ul li:nth-child(-n+2)');

firstTwoLis.forEach(li => {
  // 获取对应a标签的文本，去除首尾空格作为类名
  const className = li.querySelector('a').textContent.trim();
  // 为li添加类名
  li.classList.add(className);
});

动态生成场景（元素后续加载） #

如果<ul>是通过异步请求、框架渲染等方式动态生成的，需要用MutationObserver监听DOM变化，确保元素生成后再执行操作：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新节点添加
    if (mutation.addedNodes.length) {
      const targetLis = document.querySelectorAll('ul li:nth-child(-n+2)');
      targetLis.forEach(li => {
        const className = li.querySelector('a').textContent.trim();
        // 避免重复添加类名
        if (!li.classList.contains(className)) {
          li.classList.add(className);
        }
      });
      // 若只需执行一次，可在此处调用 observer.disconnect(); 停止监听
    }
  });
});

// 监听body的子节点变化（可根据实际情况修改监听目标）
observer.observe(document.body, { childList: true, subtree: true });

代码说明 #

• ul li:nth-child(-n+2)：CSS选择器精准匹配ul下的前两个li元素
• textContent.trim()：移除文本首尾的空格，避免类名包含无效字符
• classList.add()：安全添加类名，不会重复添加同一类名
• MutationObserver：用于监听DOM结构变化，适配动态生成的元素

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