Khalsa Labs

How To Add Dynamic Hyperlink with jQuery

Let us learn how to add dynamic hyperlink with 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>

The following two tabs change content below.
Python Developer and DIY lover.

want to comment ??

Your email address will not be published. Required fields are marked *