How can I add "href" attribute to a link dynamically using JavaScript?

小开

最佳答案

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

小开

I assume you know how to get the DOM object for the <a> element (use document.getElementById or some other method).

To add any attribute, just use the setAttribute method on the DOM object:

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

小开

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

I know this is an old post, but here's a one-liner that might be more suitable for some folks.

小开

First, try changing <a>Link</a> to <span id=test><a>Link</a></span>.

Then, add something like this in the javascript function that you're calling:

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

This way the link will look like this:

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

小开

More actual solution:

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


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

小开

enter code here javasicript added

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

小开

I know there seems plenty good answers here, but none of them seemed simple enough for what I was "told" to do in the 2022 Udemy Web Development Bootcamp by Angela.

So I remembered how simple the use of scriplets was and figured to try it and it works just as well.

For those like me who are learning let me explain: . - takes you to current URL then static path then dynamic variable generated for each post (its a blog website)

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

This is using JS inside an EJS page

same solution is also given in the solution lecture of the bootcamp here: https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12385596#overview

Lecture 317

小开

I came here because I wanted to dynamically set the link href after it's been clicked

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