使用JavaScript如何动态地给链接添加“href”属性？

Question

如何使用JavaScript动态地向链接添加href属性？

我基本上想要在用户单击网站上的特定图像时动态地向<a></a>添加href属性。

所以从：

<a>Link</a>

我需要前往：

<a href="somelink url">Link</a>

- Pavel

Answer 1

var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"

- stecb

---

有趣。我不知道你可以直接将属性访问为字段（与我的解决方案相比，使用 setAttribute）。是否有人知道这种方法是否标准？ - mgiuca

我认为在DOM元素上，href是一个可以通过el.href直接设置的属性。相反，setAttribute(el,attr)用于向特定的DOM元素添加一些自定义属性，因此在这种情况下，没有必要使用它来设置标准属性。 - stecb

这些是与元素交互的接口，使操作更加简单。例如，所有链接都有在HTMLLinkElement中定义的方法，支持设置诸如“href”之类的特定字段。您需要查看参考文献以查看哪些可以在不必使用“setAttribute”的情况下使用。另一个例子是<table>元素（HTMLTableElement），您可以使用insertRow()插入新行而无需创建<tr>并将其附加到表格中。 - Thai

@mgiuca 没错！setAttribute 可以被视为自定义属性管理器 :) - stecb

一般来说，在处理HTML文档对象模型时，你应该优先使用属性而不是setAttribute()和getAttribute()方法，因为这两个方法在IE浏览器中存在问题，并且有时并不能按照你的期望工作。更多信息请参见https://dev59.com/yFLTa4cB1Zd3GeqPcrLh#4456805。 - Tim Down

Answer 2

假设你知道如何获取<a>元素的DOM对象（使用document.getElementById或其他方法）。

要添加任何属性，只需在DOM对象上使用setAttribute方法：

a = document.getElementById(...);
a.setAttribute("href", "somelink url");

- mgiuca

---

pal，使用setAttribute修改属性相当不标准。要访问或修改当前值，应该使用属性。例如，使用elt.value而不是elt.setAttribute（'value'，val）。https://developer.mozilla.org/en/DOM/element.setAttribute#Notes - naveen

@naveen它说“最显著的是在XUL中”，这可能不是这种情况。我不确定它指的是哪些其他值（“某些属性”非常模糊），但setAttribute显然是标准（http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082），W3C不定义任何它不适用于的属性。相反，我可以保证使用该属性将无法使用某些属性名称。例如tagName和setAttribute - 这些已经是Element接口的字段/方法。我没有看到W3C文档中提到属性的属性。 - mgiuca

@mgiuca: 看起来你在发表那条评论之后找到了相关的规范。我不明白你关于属性失败然后提到tagName的意思。你是在说自定义属性吗？ - Tim Down

我的意思是，DOM（即使在浏览器中实现）是一种通用规范，用于处理XML树，而不仅仅是HTML。在处理任意的XML元素时，可靠地获取和设置属性的唯一方法是使用“getAttribute”和“setAttribute”；“tagName”是一个无法作为属性工作的属性示例。仅当处理HTML并且在DOM HTML规范中定义了某些属性时，才能使用属性来读取和分配属性。 - mgiuca

是的，这个例子很混乱，但我所说的只适用于混乱的例子。我不是在谈论 tagName 属性（即 Element 对象的成员，它告诉您元素的标记名称）。我正在谈论具有名为 tagName 的属性的假设 XML 元素。例如，<myelement tagName="foo">。你不能使用 elem.tagName 从该元素中获取 "foo"，因为该名称已被保留。您必须使用 elem.getAttribute("tagName")，这是读取 XML 属性的通用方式。 - mgiuca

Answer 3

document.getElementById('link-id').href = "new-href";

---

我知道这是一篇旧帖子，但下面这个一行代码可能更适合某些人。

- noɥʇʎԀʎzɐɹƆ

Answer 4

首先，尝试将<a>Link</a>更改为<span id=test><a>Link</a></span>。

然后，在您调用的javascript函数中添加类似于以下内容：

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

这样链接将会像这样：

<a href="somelink">Link</a>

- Rahul Sudha

---

你好。欢迎来到Stackoverflow。OP的问题似乎是关于如何向现有的a标签添加href（我基本上想动态地添加一个<a></a>的href属性）。然而，这个答案似乎在解释如何创建带有href的a标签。 - Moishe Lipsker

@MoisheLipsker 它仍然有效。即使它破坏了原始链接，它仍然可以在某种程度上“设置”href。然而，它并不实用，因为它不能保留先前的链接而不破坏它，从而可能破坏其他属性和信息。 - Reality

这种方法稍微有些繁琐。首先，它不必要地向DOM中添加了一个额外的元素，只是为了选择其中的一个元素，而不是直接将该ID添加到a标签并直接选择它。其次，它使用字符串替换来销毁和重新创建a标签，这是有风险的（abc的值可能会破坏你的HTML），而且在可以使用element.setAttribute('href', abc)的情况下，不必要地改变了DOM。 - undefined

Answer 5

更实际的解决方案：

<a id="someId">Link</a>

const a = document.querySelector('#someId');
a.href = 'url';

- Seldo97

---

最终，有人使用了 querySelector。 - Reality

Answer 6

我来这里是因为我想在链接被点击后动态设置链接的 href 属性

<a id='dynamic'>link text</a>

document.getElementById("dynamic").addEventListener("click", onClick_dynamic)

function onClick_dynamic(e){
    const nextPage = getNextPage()
    document.getElementById("dynamic").href = _BASE_URL + "?nextPage=" + nextPage
    // e.default processing sends user to href
}

- kztd

Answer 7

我知道这里似乎有很多好答案，但没有一个对于我在Angela的2022年Udemy Web开发编程班中“被告知”要做的事情足够简单。

所以我想起使用脚本代码有多简单，并尝试了一下，它的效果也很好。

像我这样正在学习的人，让我解释一下： . - 带您进入当前URL 然后是静态路径 然后是为每篇文章生成的动态变量（它是一个博客网站）

<a href="./posts/<%= post.title %>">Read More</a>

这是在 EJS 页面中使用 JS。

同样的解决方案也在这个编程训练营的解决方案讲座中提供： https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12385596#overview

第 317 讲

- Arkadiusz Kulpa

Answer 8

单行解决方案

<a id="yourId">Link</a>
document.querySelector("#yourId").href("URL")

- LuchoNoPrograma

---

欢迎来到SO！请先看一下之前给出的其他答案。你的方法已经在那里提到了。为了保持网站的清晰和方便查找答案，我们尽量避免重复回答。 - ahuemmer

Answer 9

JavaScript已添加

var x = "www.google.com";
vay y = "550";
var z= x+y;
document.write('<a href="' + z + '">GONDER</a>');

- Yasin İPEK

---

他们想要更改现有链接而不是创建新链接。另外，document.write这种方法很糟糕，几乎不应该被考虑使用。 - Reality

这是最好的方法。 - Yasin İPEK

差得太远了。你的方法非常危险，因为 XSS 在其中非常容易发生。此外，document.write 会清除整个网页。你回答中的另一个问题是，这里的 OP（原始发布者）不想要一个新链接，而是一个现有链接，并且他们希望它的 href 被编辑。 - Reality