如何基于基础 URL 动态生成链接列表
作者：袖梨
2026-06-23
本文介绍如何通过 JavaScript 动态为 HTML 列表项中的 <a> 标签注入完整 URL，将预设的“主链接”与各 <li> 元素的 slug 属性值拼接，实现一键批量生成可点击链接。
本文介绍如何通过 javascript 动态为 html 列表项中的 `` 标签注入完整 url，将预设的“主链接”与各 `
` 元素的 `slug` 属性值拼接，实现一键批量生成可点击链接。在构建导航菜单、侧边栏链接树或内容聚合页时，常需基于一个统一的基础域名（如 https://example.com），动态生成多个子路径链接。若原始 HTML 中仅以 slug 属性存储相对路径（如 "about.html" 或 "blog/post-1.html"），而未预先拼接完整 URL，则需借助脚本完成自动化注入。
以下是一个简洁、健壮且可复用的解决方案：
✅ 核心实现逻辑
使用 document.querySelectorAll() 获取所有目标 <li> 元素，再通过 forEach() 遍历，依次：
- 读取 slug 属性值；
- 移除冗余属性（如 slug 和 src）以保持 DOM 清洁；
- 定位内部 <a> 标签，并将其 href 属性设置为 masterLinkValue + '/' + slug。
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}`; }});
⚠️ 注意事项与最佳实践
-
URL 安全性：上述写法适用于简单路径拼接；若 slug 可能含特殊字符（如空格、中文、https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 锚点等），建议使用 URL 构造函数确保合规：
try { const url = new URL(slug, masterLinkValue); anchor.href = url.toString();} catch (e) { console.warn(`Invalid slug: ${slug}`, e);} - 锚点支持：示例中 slug="link-1.htmlhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdiv3" 会正确生成 https://google.com/link-1.htmlhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdiv3，无需额外处理。
- 执行时机：请确保脚本在 DOM 加载完成后运行（推荐放在 <body> 底部，或使用 DOMContentLoaded 事件）。
- 可扩展性：如需支持点击按钮触发（而非自动执行），可将逻辑封装为函数，并绑定至按钮的 onclick 事件。
✅ 最终效果对比
原始 HTML：
<ul class="linktree"> <li class="jstree" slug="link-1.html" src="1"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Text 1</a></li> <li class="jstree" slug="link-2.html" src="1"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Text 2</a></li> <li class="jstree" slug="link-3.html" src="1"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Text 3</a></li></ul>
执行后变为：
<ul class="linktree"> <li class="jstree"><a href="https://google.com/link-1.html">Link Text 1</a></li> <li class="jstree"><a href="https://google.com/link-2.html">Link Text 2</a></li> <li class="jstree"><a href="https://google.com/link-3.html">Link Text 3</a></li></ul>
该方法轻量、无依赖、兼容主流浏览器，是静态站点或 CMS 前端增强的实用技巧。
