【发布时间】：2011-01-14 08:48:30
【问题描述】：
如何使用 JavaScript 将href 属性动态添加到链接？
我基本上想动态地将href 属性添加到<a></a>（即当用户单击网站中的特定图像时）。
所以来自：
<a>Link</a>
我要去：
<a href="somelink url">Link</a>
【问题讨论】：
标签： javascript html
【发布时间】：2011-01-14 08:48:30
【问题描述】：
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
【讨论】：
-
有趣。我不知道您可以直接将属性作为字段访问（与下面的解决方案相比，使用
setAttribute）。有人知道这种方法是否标准吗？ -
我认为DOM元素上的href是一个可以直接通过el.href设置的属性。相反， setAttribute(el,attr) 用于将一些自定义属性添加到特定的 DOM 元素，因此在这种情况下，无需使用它来设置标准。属性
-
但是两种方式都正确吗？不要试图批评答案——它很可能是正确的。但是在网络上，仅仅获得适合您的东西是不够的。它需要在所有浏览器中工作，这意味着您需要遵循标准。 FWIW，这也适用于我（在 Firefox 中），但我很想知道它是否真的是一种标准的方法。 W3C DOM 规范 (w3.org/TR/DOM-Level-2-Core/core.html) 似乎没有提到它。
-
这些是更容易与元素交互的接口。例如，所有链接都有
HTMLLinkElement中定义的方法，支持设置某些字段，例如href。您必须查看参考资料，看看您可以使用哪一个，而不必setAttribute。另一个示例是<table>元素 (HTMLTableElement)，您可以在其中使用insertRow()插入新行，而无需创建<tr>并将其附加到表中。 -
@mgiuca：一般来说，对于 HTML DOM，您应该更喜欢使用属性而不是
setAttribute()和getAttribute()，它们在 IE 中被破坏，并且并不总是符合您的预期。见stackoverflow.com/questions/4456231/…
我假设您知道如何获取 <a> 元素的 DOM 对象（使用 document.getElementById 或其他方法）。
要添加任何属性，只需在 DOM 对象上使用setAttribute 方法：
a = document.getElementById(...);
a.setAttribute("href", "somelink url");
【讨论】：
-
朋友，setattribute 对于修改属性来说是非常不标准的。要访问或修改当前值，您应该使用属性。例如，使用 elt.value 代替 elt.setAttribute('value', val)。 developer.mozilla.org/en/DOM/element.setAttribute#Notes
-
@naveen 它说“在 XUL 中最显着”，这可能不是这个。我不确定它指的是哪些其他值（“某些属性”非常模糊），但
setAttribute显然是标准（w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082），而且 W3C 没有定义任何它不起作用的属性。相反，我可以保证对于某些属性名称，使用该属性将失败。比如tagName和setAttribute——它们已经是Element接口的字段/方法。我在 W3C 文档中没有看到任何地方提到属性的属性。 -
@mgiuca：您似乎在发布最后一条评论后找到了相关规范。我不明白你关于属性失败的观点，然后提到
tagName。您是在谈论自定义属性吗？ -
我的意思是 DOM（即使在浏览器中实现）是一个通用规范，用于处理一般的 XML 树，而不仅仅是 HTML。使用任意 XML 元素时，可靠地获取和设置属性的唯一方法是
getAttribute和setAttribute；"tagName"是不能用作属性的属性示例。只有在使用 HTML 时，并且对于 DOM HTML 规范中定义的某些属性，您才能使用属性来读取和分配属性。 -
我可能误解了，但这仍然令人困惑。
tagName是 JavaScript 中Element对象的属性，在 HTML 和 XML DOM 中，您不能通过getAttribute("tagName")获取元素的标签名称（IE 除外，其实现 @987654337 @ 和setAttribute()坏了），这似乎与您所说的完全相反。
document.getElementById('link-id').href = "new-href";
我知道这是一篇旧帖子，但这里有一个可能更适合某些人的单行字。
【讨论】：
首先，尝试将<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>
更实际的解决方案：
<a id="someId">Link</a>
const a = document.querySelector('#someId');
a.href = 'url';
【讨论】：
-
终于有人用
querySelector
我知道这里似乎有很多很好的答案，但对于我在 2022 年安吉拉的 Udemy Web 开发训练营中“告诉”我要做的事情来说，它们似乎都不够简单。
所以我想起了使用 scriplets 是多么简单，并想尝试一下，它也同样有效。
对于像我这样正在学习的人，让我解释一下： . - 带您到当前 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 课
【讨论】：
在此处输入代码已添加 javasicript
var x = "www.google.com";
vay y = "550";
var z= x+y;
document.write('<a href="' + z + '">GONDER</a>');
【讨论】：
-
他们想要更改现有链接而不是创建新链接。另外，
document.write是一种可怕的方法，甚至很少考虑使用。 -
这是最好的方法
-
甚至没有关闭。这是非常危险的，因为 XSS 在您的方法中非常容易。此外，document.write 会清除整个网页。您的回答遇到的另一个问题是，此处的 OP（原始发帖人）不想要 new 链接，而是想要 existing 链接，他们希望它具有它的href已编辑。