CODEWITHSUNDEEP
javascripthtml
Pavel
Pavel

Reputation: 5353

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

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

I basically want to add a href attribute to <a></a> dynamically (i.e. when the user clicks on specific image in the website).

So from:

<a>Link</a>

I need to go to:

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

Upvotes: 147

Views: 485438

Answers (9)

Yasin İPEK
Yasin İPEK

Reputation: 70

javasicript added

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

Upvotes: -6

LuchoNoPrograma
LuchoNoPrograma

Reputation: 1

Single line solution

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

Upvotes: -2

kztd
kztd

Reputation: 3415

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
}

Upvotes: 1

Arkadiusz Kulpa
Arkadiusz Kulpa

Reputation: 119

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

Upvotes: 0

Seldo97
Seldo97

Reputation: 719

More actual solution:

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

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

Upvotes: 10

Rahul Sudha
Rahul Sudha

Reputation: 137

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>

Upvotes: 7

noɥʇʎԀʎzɐɹƆ
noɥʇʎԀʎzɐɹƆ

Reputation: 10637

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.

Upvotes: 8

stecb
stecb

Reputation: 14746

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

Upvotes: 259

mgiuca
mgiuca

Reputation: 21357

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");

Upvotes: 40

Related Questions