JavaScript生成含href的<li>与<a>标签时href值错误问题

你的代码能正常生成列表，但<a>标签的href值错误，核心问题有两个：

• forEach回调函数的参数理解错误：你把回调的第二个参数当成了自定义的href数组，但实际上这个参数是当前元素的索引值（数字），导致href被赋值成了0、1、2这类数字。
• links和href未用const/let声明，会变成全局变量，存在潜在的变量污染风险。

修正方案一（基于原代码调整） #

直接利用forEach的索引值匹配对应href：

const header_top = document.getElementById("headerTop");
const ul = document.createElement("ul");

// 声明变量，避免全局污染
const links = ['Facebook', 'Youtube', 'Google'];
const hrefs = ["https://www.facebook.com/", "https://youtube.com", "https://google.com"];

header_top.appendChild(ul);

links.forEach((link, index) => {
  const li = document.createElement("li");
  ul.appendChild(li);
  const a = document.createElement("a");
  a.textContent = link;
  // 通过索引获取对应位置的href地址
  a.href = hrefs[index];
  li.appendChild(a);
});

修正方案二（更健壮的写法） #

将链接文本和地址合并为对象数组，避免索引对应错误，可读性更强：

const header_top = document.getElementById("headerTop");
const ul = document.createElement("ul");

// 用对象存储每组链接的文本和地址，对应关系更清晰
const navLinks = [
  { text: 'Facebook', url: 'https://www.facebook.com/' },
  { text: 'Youtube', url: 'https://youtube.com' },
  { text: 'Google', url: 'https://google.com' }
];

header_top.appendChild(ul);

navLinks.forEach(item => {
  const li = document.createElement("li");
  ul.appendChild(li);
  const a = document.createElement("a");
  a.textContent = item.text;
  a.href = item.url;
  li.appendChild(a);
});

对应的HTML结构 #

<header id="headerTop"></header>

修正后生成的HTML结构完全符合你的预期，每个<a>标签都会带有正确的href属性。

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