如何在运行时为a标签设置href？循环赋值仅生效一次求修正

问题现象 #

从API获取URL后，通过模板引擎循环渲染表格与锚点标签，尝试用JavaScript为锚点设置href属性时出现异常：

• 成功打印出2个URL，锚点标签也渲染了两次
• 第一个锚点的href被设置为第二个URL的值
• 第二个锚点的href为空

问题根源 #

1. ID唯一性冲突：HTML中id属性必须是全局唯一的，循环渲染时重复生成id="anchor"的标签，导致document.getElementById('anchor')每次只会匹配到第一个带有该ID的元素。
2. DOM覆盖与渲染时机问题：每次循环的JS代码执行时，都会把当前URL赋值给第一个匹配到的锚点，最终第一个锚点会被最后一次循环的URL覆盖；而最后一次循环执行JS时，当前的锚点可能还未完成DOM渲染，导致无法找到元素设置href。

修复方案 #

方案一：直接通过模板引擎赋值（推荐，无需JS） #

不需要额外JavaScript，直接在模板中把href属性用API返回的URL填充，这是最简洁高效的方式：

{% for link in links %}
<table class="table">
<thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">map link</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">1</th>
        <td>
            <!-- 直接用模板变量填充href -->
            <a href="{{route.summary.url}}">Click on map link</a>
        </td>
    </tr>
</tbody>
</table>
{% endfor %}
{% endif %}

方案二：保留JavaScript，使用唯一标识 #

如果必须通过JavaScript设置，需要为每个锚点生成唯一ID，确保每次JS能找到对应元素：

{% for link in links %}
<table class="table">
<thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">map link</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">1</th>
        <td>
            <!-- 用循环索引生成唯一ID -->
            <a id="anchor-{{loop.index}}" href="">Click on map link</a>
        </td>
    </tr>
</tbody>
</table>
<script>
    var url = '{{route.summary.url}}';
    document.write(url);
    // 通过唯一ID获取当前循环的锚点元素
    var element = document.getElementById('anchor-{{loop.index}}');
    element.setAttribute("href", url);
</script>
{% endfor %}
{% endif %}

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