本文介绍如何通过 JavaScript 遍历 HTML 列表，提取每个 元素的 slug 属性值，并将其与预设的主域名（如 https://google.com）拼接，自动填充到对应 标签的 href 中，实现链接的批量动态生成。

本文介绍如何通过 javascript 遍历 html 列表，提取每个 `

` 元素的 `slug` 属性值，并将其与预设的主域名（如 `https://google.com`）拼接，自动填充到对应 `` 标签的 `href` 中，实现链接的批量动态生成。

在构建导航菜单、文档目录或 Linktree 类页面时，常需将统一的基础 URL 与多个相对路径片段（如 link-1.html）组合成完整可点击链接。手动编写易出错且难以维护，而借助 DOM 操作可高效、可靠地完成自动化注入。

✅ 核心实现逻辑

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

元素，再通过 forEach() 遍历处理：

• 读取 slug 属性值；
• 移除冗余属性（slug 和 src），保持 HTML 干净；
• 将 masterLinkValue 与 slug 拼接后赋值给内部 标签的 href 属性。

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.html#div3），拼接后将生成 https://google.com/link-1.html#div3，语义正确且浏览器原生支持。

Krisp

Krisp是一款用于会议降噪、语音增强、转写和会议记录的 AI 音频助手。

下载

⚠️ 注意事项与最佳实践

• 协议安全性：务必使用 https:// 开头的 masterLinkValue，避免混合内容（Mixed Content）警告；
• 路径合法性：确保 slug 值为合法路径片段（不包含空格、未编码特殊字符等），必要时可用 encodeURIComponent() 处理（但通常 slug 由开发者可控，无需额外编码）；
• DOM 加载时机：脚本应置于 底部，或包裹在 DOMContentLoaded 事件中，防止因 DOM 未就绪导致查询失败；
• 可扩展性建议：若需支持多级路径或动态基础路径（如从 或 data 属性读取），可封装为函数并接受参数：

function buildLinks(baseURL, selector = '.linktree li.jstree') {
  document.querySelectorAll(selector).forEach(li => {
    const slug = li.getAttribute('slug');
    if (slug && li.querySelector('a')) {
      li.querySelector('a').href = new URL(slug, baseURL).href;
      li.removeAttribute('slug');
      li.removeAttribute('src');
    }
  });
}
// 调用示例
buildLinks('https://google.com');

使用 new URL(slug, baseURL) 替代字符串拼接，能自动处理路径规范化（如 // 合并、../ 解析等），更符合 Web 标准，推荐在复杂路径场景下采用。

最终生成的 HTML 将干净、语义清晰，且所有链接均可直接跳转，兼顾开发效率与运行可靠性。