How Can I Add "Href" Attribute to a Link Dynamically Using Javascript?

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';

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:

Lecture 317