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

Question

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

我基本上想要动态添加href属性<a></a>(即当用户点击网站中的特定图像时).

所以来自:

<a>Link</a>

我需要去:

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

Answer 1

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

这些是更容易与元素交互的接口.例如,所有链接都有[`HTMLLinkElement`](http://krook.org/jsdom/HTMLLinkElement.html)中定义的方法,它支持设置某些字段,例如`href`.你必须查看引用,看看你可以使用哪一个而不必使用`setAttribute`.另一个例子是`<table>`元素([HTMLTableElement](http://krook.org/jsdom/HTMLTableElement.html)),你可以使用`insertRow()`插入新行而不必创建`< tr>`并将其附加到表格中. (6认同)
@mgiuca:一般来说,对于HTML DOM,你应该更喜欢使用属性而不是`setAttribute()`和`getAttribute()`,它们在IE中被破坏,并不总是按照你的预期行事.请参阅http://stackoverflow.com/questions/4456231/retrieving-html-attribute-values-the-dom-0-way/4456805#4456805 (3认同)

Answer 2

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

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

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

Answer 3

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

我知道这是一篇旧文章，但这里有一句俏皮话可能更适合某些人。

Answer 4

更实际的解决方案：

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

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

Answer 5

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