如何在Href标签中将动态Javascript变量作为参数传递？

方案1：给链接加统一类名匹配（更精准，推荐） #

先给所有6个目标CTA链接添加同一个自定义类，比如referral-cta，无需设置ID，即可批量选中处理：

<!-- 6个相同的CTA链接结构示例 -->
<a href="https://example.com/program" class="referral-cta">Get Started</a>
<a href="https://example.com/program" class="referral-cta">Get Started</a>
<!-- 剩余4个链接结构完全一致 -->

<script>
// 动态获取的referralToken值，可根据业务逻辑动态赋值
var referralTokenValue = 123456789;

document.addEventListener('DOMContentLoaded', function() {
  // 批量选中所有目标链接
  var ctaLinks = document.querySelectorAll('.referral-cta');
  // 遍历替换每个链接的href参数
  ctaLinks.forEach(function(link) {
    // 用URL API处理参数，避免拼接错误
    var targetUrl = new URL(link.href);
    targetUrl.searchParams.set('referralToken', referralTokenValue);
    link.href = targetUrl.toString();
  });
});
</script>

方案2：按href前缀匹配（无需修改现有a标签结构） #

如果不方便给链接加类，可以直接通过href前缀匹配所有目标链接：

<script>
var referralTokenValue = 123456789;

document.addEventListener('DOMContentLoaded', function() {
  // 匹配所有href以指定前缀开头的a标签
  var ctaLinks = document.querySelectorAll('a[href^="https://example.com/program"]');
  ctaLinks.forEach(function(link) {
    var targetUrl = new URL(link.href);
    targetUrl.searchParams.set('referralToken', referralTokenValue);
    link.href = targetUrl.toString();
  });
});
</script>

注意事项 #

• 脚本建议放在页面</body>标签之前，或者保留DOMContentLoaded事件监听，避免DOM未加载完成时无法选中链接
• 用URL API处理参数兼容性良好，支持所有现代浏览器，无需额外依赖

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