如何使用 JavaScript 动态构建带基础 URL 的链接列表-js教程-PHP中文网

如何使用 JavaScript 动态构建带基础 URL 的链接列表

本文介绍如何通过 JavaScript 遍历 HTML 列表项，提取 slug 属性值，并将其与预设的“主链接”拼接，自动为每个标签生成完整可点击的 href 地址，同时清理冗余属性。

本文介绍如何通过 javascript 遍历 html 列表项，提取 `slug` 属性值，并将其与预设的“主链接”拼接，自动为每个 `` 标签生成完整可点击的 `href` 地址，同时清理冗余属性。

在前端开发中，常需将静态 HTML 结构动态增强为功能性导航链路——例如，统一前缀（如 https://google.com）搭配多个相对路径（如 link-1.html），批量生成有效超链接。该需求无需后端参与，纯前端即可高效实现。

✅ 核心实现逻辑

使用 document.querySelectorAll() 定位所有目标

元素，再通过 forEach() 遍历，依次完成以下操作：

读取 slug 属性值；
移除无用的 slug 和 src 属性（保持 DOM 干净）；
定位内部标签，将其 href 属性更新为拼接后的完整 URL。

const masterLinkValue = 'https://google.com';
document.querySelectorAll('.linktree li.jstree').forEach(li => {
  const slug = li.getAttribute('slug');
  if (!slug) return; // 跳过缺失 slug 的项，增强健壮性

  li.removeAttribute('slug');
  li.removeAttribute('src');

  const anchor = li.querySelector('a');
  if (anchor) {
    anchor.href = `${masterLinkValue}/${slug}`;
  }
});

? 提示：若 slug 中含锚点（如 link-1.htmlhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection2），上述拼接方式仍能正确保留；如需更严格的 URL 规范化（如处理重复斜杠、编码特殊字符），可升级为 new URL(slug, masterLinkValue).href：
anchor.href = new URL(slug, masterLinkValue).href;
此方式自动解析相对路径、处理编码、避免协议/主机冲突，推荐用于生产环境。

Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

⚠️ 注意事项

确保脚本在 DOM 加载完成后执行（推荐置于 DOMContentLoaded 事件或底部）；
原始 HTML 中仅为占位符，替换后务必验证链接有效性；
若列表由框架（如 React/Vue）动态渲染，需在组件挂载后或 nextTick 中调用该逻辑；
多次运行本脚本可能导致重复拼接（如 https://google.com/https://google.com/link-1.html），建议添加防重处理（例如仅当 href 为 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 或空时才更新）。