动态生成带基础URL的链接列表

以下是完整的 JavaScript 代码实现：

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}`;
  }
});

⚠️ JavaScript 动态链接注意事项与最佳实践

该方案虽然简洁高效，但以下细节值得开发者特别留意：

• URL 安全性处理：上述直接字符串拼接方式对简单路径有效，但如果 slug 中包含特殊字符（如空格、中文或#号），建议使用 URL 构造函数确保 URL 合规性，让代码更加健壮可靠：

try {
  const url = new URL(slug, masterLinkValue);
  anchor.href = url.toString();
} catch (e) {
  console.warn(`Invalid slug: ${slug}`, e);
}

• 锚点链接支持：例如 slug 为 "link-1.html#div3"，拼接后能自动生成 https://google.com/link-1.html#div3，无需额外编码处理。
• 脚本执行时机：务必确保脚本在 DOM 加载完成后执行，推荐将脚本放在 底部，或使用 DOMContentLoaded 事件触发，避免因 DOM 未渲染完成导致选择器失效。
• 功能可扩展性：如需通过按钮点击触发而非自动执行，可将上述逻辑封装为函数，再绑定到按钮的 onclick 事件上，灵活适应不同交互场景。

✅ 动态链接生成前后效果对比

来看一个完整的具体示例，以下是原始 HTML 结构：