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

95

如何href使用JavaScript动态将属性添加到链接？

我基本上想动态添加一个href属性<a></a>（即，当用户单击网站中的特定图像时）。

来自：

<a>Link</a>

我需要去：

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

javascript html

— 帕维尔
source

165

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

— stecb
source

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

— mgiuca

我认为在DOM元素上href是可以由el.href直接设置的属性。而是使用setAttribute（el，attr）将某些自定义属性添加到特定的DOM元素，因此在这种情况下，无需使用它来设置std。attr

— stecb 2011年

但是，两种方法都正确吗？不要试图批评答案-这很可能是正确的。但是，在网络上，仅仅获得适合您的东西是不够的。它需要在所有浏览器中都可以使用，这意味着您需要遵循标准。FWIW，这对我也适用（在Firefox中），但是我很想知道这是否实际上是一种标准方法。W3C DOM规范（w3.org/TR/DOM-Level-2-Core/core.html）似乎没有提到它。

— mgiuca

6

这些是更容易与元素交互的界面。例如，所有链接都有定义的方法，HTMLLinkElement其中支持设置某些字段，例如href。您必须查看参考资料，看看无需使用即可使用哪一个setAttribute。另一个示例是<table>元素（HTMLTableElement），您可以在其中使用该元素insertRow()来插入新行，而不必创建<tr>并将其附加到表中。

— 泰国

3

@mgiuca：通常对于HTML DOM，您应该更喜欢使用属性而不是setAttribute()和getAttribute()，这些属性在IE中是不完整的，因此并不总是能达到您的期望。见stackoverflow.com/questions/4456231/...

— 蒂姆向下

25

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

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

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

— i
source

朋友，setattribute对于修改属性是非常不标准的。要访问或修改当前值，应使用属性。例如，使用elt.value代替elt.setAttribute（'value'，val）。 developer.mozilla.org/en/DOM/element.setAttribute#Notes

— naveen

@naveen它说“最明显的是在XUL中”，大概不是这个意思。我不确定它引用的是哪个其他值（“某些属性”是否非常模糊），但setAttribute显然是标准的（w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082），而W3C并未定义任何不适用于的属性。相反，我可以保证对于某些属性名称，使用该属性将失败。如和tagName，setAttribute这些已经是Element接口的字段/方法。我没有在W3C文档中看到任何提及属性的属性。

— 2011年

@mgiuca：看来您在发布最后一条评论后找到了相关规范。我不理解您关于属性失败的观点，然后提及tagName。您在谈论自定义属性吗？

— Tim Down'1

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

— mgiuca

我可能会误会，但这仍然令人困惑。tagName 是ElementHTML和XML DOM中JavaScript对象的属性，并且您不能通过来获得元素的标签名getAttribute("tagName")（IE中的实现getAttribute()和setAttribute()损坏的IE除外），这似乎与您所说的相反。

— 蒂姆·唐

3

首先，尝试更改<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）
source

你好欢迎使用Stackoverflow。该任择议定书的问题，似乎是有关如何将添加href到现有的 a标签（基本上，我想添加一个href属性<a>中动态</A>）。然而，这个答案似乎解释了如何创建一个a带有标签href。

— Moishe Lipsker '16

1

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

我知道这是一篇过时的文章，但是这里的单线可能更适合某些人。

— ɥʇʎԀʎ
source