How can I add "href" attribute to a link dynamically using JavaScript?
JavascriptHtmlJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
Solution 2 - 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");
Solution 3 - Javascript
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.
Solution 4 - Javascript
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>
Solution 5 - Javascript
More actual solution:
<a id="someId">Link</a>
const a = document.querySelector('#someId');
a.href = 'url';
Solution 6 - Javascript
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
Solution 7 - Javascript
enter code here javasicript added
var x = "www.google.com";
vay y = "550";
var z= x+y;
document.write('<a href="' + z + '">GONDER</a>');