如何使用 JavaScript 將“href”屬性動態添加到鏈接？

Question

如何使用 JavaScript 將href屬性動態添加到鏈接？

我基本上想動態地向<a></a>添加href屬性（即當用戶單擊網站中的特定圖像時）。

所以從：

<a>Link</a>

我需要 go 到：

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

Answer 1

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

Answer 2

我假設您知道如何獲取<a>元素的 DOM 對象（使用document.getElementById或其他一些方法）。

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

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

Answer 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>

Answer 4

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

---

我知道這是一篇舊帖子，但這里有一篇可能更適合某些人的單行文章。

Answer 5

更實際的解決方案：

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

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

Answer 6

我知道這里似乎有很多很好的答案，但對於我在 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講

Answer 7

單線解決方案

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

Answer 8

在此處輸入代碼添加了 javasicript

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

Answer 9

我來到這里是因為我想在點擊鏈接后動態設置鏈接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
}