如何使用JavaScript为动态生成的li内a标签添加href属性与文本内容

首先可以实现你要的锚点跳转效果，不过要先说明：你现在写的<li><a></li></a>属于非法的标签嵌套结构，浏览器渲染时会自动修正为标准的<li><a></a></li>结构，不会影响后续的JS操作。

实现步骤 #

1. 先配置菜单项和锚点的对应关系 #

你可以提前把每个菜单的文本、跳转锚点存在数组里，示例如下：

const menuConfig = [
  { text: '首页', anchor: '#home' },
  { text: '关于', anchor: '#about' },
  { text: '服务', anchor: '#service' },
  { text: '联系我们', anchor: '#contact' }
  // 按你实际的菜单项数量补充即可
]

2. 遍历DOM为a标签赋值属性 #

选择你菜单栏下的所有a标签，遍历为每个元素添加文本和href属性即可：

// 把 .menu 替换为你菜单栏实际的父容器选择器，避免选中页面其他位置的a标签
document.querySelectorAll('.menu li a').forEach((aEle, index) => {
  const currConfig = menuConfig[index]
  if (!currConfig) return
  // 设置菜单文本
  aEle.textContent = currConfig.text
  // 设置锚点跳转链接
  aEle.href = currConfig.anchor
})

额外优化建议 #

• 如果需要实现点击整个li区域都能跳转，不需要额外给li绑定点击事件，只要给a标签加以下CSS即可：

  .menu li a {
    display: block;
    width: 100%;
    height: 100%;
    /* 可按需加内边距调整点击区域 */
  }
  

• 建议你后续调整动态生成DOM的逻辑，直接输出合法的<li><a></a></li>嵌套结构，避免浏览器自动修正出现不可预期的渲染异常。

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