如何将NodeList中的文本内容复制到移动端新导航列表中

问题根源 #

你遇到的每个锚点显示所有文本的问题，本质是循环时错误地累加了所有导航项的文本内容，而非单独获取每个原导航项的文本。

修正方案 #

以下是基于常见场景的修正代码，你可以根据自己的实际DOM结构调整：

1. 原HTML示例

<!-- 桌面端导航 -->
<ul class="desktop-nav">
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于我们</a></li>
  <li><a href="/services">服务</a></li>
</ul>

<!-- 移动端导航容器 -->
<ul class="mobile-nav"></ul>

2. 正确的JavaScript实现

方式一：使用forEach遍历

// 获取原导航的所有链接元素
const desktopLinks = document.querySelectorAll('.desktop-nav a');
// 获取移动端导航容器
const mobileNav = document.querySelector('.mobile-nav');

// 遍历每个原链接，创建对应的移动端导航项
desktopLinks.forEach(link => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  
  // 复制原链接的href属性
  a.href = link.href;
  // 仅复制当前链接的文本内容（trim()可去除多余空格）
  a.textContent = link.textContent.trim();
  
  li.appendChild(a);
  mobileNav.appendChild(li);
});

方式二：使用for...of遍历

如果习惯用传统循环，也可以用这种方式：

const desktopLinks = document.querySelectorAll('.desktop-nav a');
const mobileNav = document.querySelector('.mobile-nav');

for (const link of desktopLinks) {
  const li = document.createElement('li');
  const a = document.createElement('a');
  
  a.href = link.href;
  a.textContent = link.textContent.trim();
  
  li.appendChild(a);
  mobileNav.appendChild(li);
}

3. 若原NodeList是li元素的情况

如果你的原NodeList是桌面导航的li节点而非a节点，只需调整文本获取逻辑：

const desktopItems = document.querySelectorAll('.desktop-nav li');
const mobileNav = document.querySelector('.mobile-nav');

desktopItems.forEach(item => {
  const originalLink = item.querySelector('a');
  const li = document.createElement('li');
  const a = document.createElement('a');
  
  a.href = originalLink.href;
  a.textContent = originalLink.textContent.trim();
  
  li.appendChild(a);
  mobileNav.appendChild(li);
});

关键注意点 #

• 不要在循环外定义文本变量并累加，必须在每次循环中直接获取当前遍历项的textContent
• 使用trim()可以去除文本前后的多余空格，让导航文本更整洁

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