JavaScript实现为WordPress导航菜单每个li逐个添加span标签

所有span都插入到最后一个li的核心原因是循环逻辑错误：

• DOM操作中appendChild()插入已存在的页面元素时，不会复制元素，只会将元素从原有位置移动到目标位置。
• 原有代码写了两层嵌套循环：外层每创建1个span，内层就遍历所有5个li，反复把同一个span依次插入每个li，循环结束后这个span自然停在最后一个遍历到的li（也就是Certification对应的menu-item-87）里。
• 额外逻辑偏差：你提到WordPress动态生成的菜单id格式从menu-item-84开始，但原有代码id计数从83起步，和实际规则不匹配。

去掉内层多余的循环，让文本数组的索引和菜单项id一一对应即可，修复后的完整JS逻辑如下：

const text = ["Case Studies Intro", "Design Thinking Videos", "Graphic, Painting...", "UX, UI, Html, Css", "HFI, Adobe, Autodesk"];
document.body.onload = addElement;  

function addElement () {
  const arrayLength = text.length;
  const prefix = 'menu-item-';
  // 菜单项id起始值，根据WordPress实际生成规则调整即可，当前示例从83开始匹配你给出的HTML结构
  let idStart = 83;

  for (let i = 0; i < arrayLength; i++)  {
    // 创建span和对应文本
    const newSpan = document.createElement("span");
    const newContent = document.createTextNode(text[i]);
    newSpan.appendChild(newContent);
    // 直接匹配对应索引的li，无需内层循环
    const targetLi = document.getElementById(prefix + (idStart + i));
    if (targetLi) { // 增加判断避免id不存在时抛出JS错误
      targetLi.appendChild(newSpan);
    }
  }
}

如果不想硬编码菜单id数字（避免WordPress后台调整菜单后id变化导致功能失效），可以直接通过导航栏的类选择器选中所有菜单项，按顺序匹配文本即可，完全不依赖id：

const text = ["Case Studies Intro", "Design Thinking Videos", "Graphic, Painting...", "UX, UI, Html, Css", "HFI, Adobe, Autodesk"];
document.body.onload = addElement;  

function addElement () {
  // 直接选中导航栏下所有菜单项li
  const menuItems = document.querySelectorAll('.navbar-nav .nav-item');
  text.forEach((content, index) => {
    if (!menuItems[index]) return;
    const newSpan = document.createElement("span");
    newSpan.textContent = content;
    menuItems[index].appendChild(newSpan);
  })
}

内容的提问来源于stack exchange，提问作者Deepak Madhana Raj kannan