dynamic hyperlink

How To Add Dynamic Hyperlink with jQuery

Harman Singh

Harman Singh

— 1 min read

Let us learn how we can add dynamic hyperlink in a webpage with the help of jQuery

jQuery is a powerful JavaScript library. You can download latest version of jQuery from by clicking here. You can do a lot of stuff to your webpage with jQuery. Here is small example for how to add dynamic hyperlink with jquery.

It can be beneficial when you want any user to fill a valid form then the hyperlink of next Button will be generate. In many cases you have to generate hyperlinks dynamically. To code it, you only have to add a div with an unique ID and put your text or button to be hyperlinked in it. Lets do it:
<html>
<body>
<button id="generate"> Generate Links</button>
<div id="dynamic">
<a>click on me. </a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
$('#generate').click(function() {
$('#dynamic').find('a').attr('href',"http://khalsalabs.com'');
});
</script>
</body>
</html>

dynamic_hyperlink
For add hyperlink  to only one selective text from multiples. You have to put id inside <a> tag. e.g.

<html>
<body>
<button id="generate"> Generate Links</button>
<div id="dynamic">
<a id="first">click on me. </a>
<br>
<a id="second"> can also try me. </a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$('#generate').click(function() {
$('#dynamic').find('a#first').attr('href','sc.html');
});
</script>
</html>

Read more