Example 1:
In this example, using jquery, we set the attr() method to the url entered by the user in the input tag, when user clicks the set href buton.
<!DOCTYPE html> <html lang="en"> <head> <title>Set href attribute at runtime</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <style> #btn { background-color: #4caf50; color: white; } input { color: #4caf50; } a { color: #4caf50; } h1 { color: green; } </style> </head> <body> <center> <h1>Bajarangi Soft</h1> <b>Set href attribute at runtime</b> <br> <input type="text" name="url" /> <button id="btn">Set href</button> <button><a id="click" href="#" target="_blank">link</a></button> </center> </body> <script> $(document).ready(function () { $("#btn").click(function () { $("#click").attr("href", $('input[name$="url"]').val()); }); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <title>Set href attribute at runtime</title> <style> #btn { background-color: #4caf50; color: white; } input { color: #4caf50; } a { color: #4caf50; } h1 { color: green; } </style> </head> <body> <center> <h1>Bajarangi Soft</h1> <b>Set href attribute at runtime</b> <br> <div id="link"> <a id="click" href= "https://blog.bajarangisoft.com/blogs" target="_blank"> https://https://blog.bajarangisoft.com/ </a> <button id="btn">Change url</button> </div> </center> </body> <script> $(document).ready(function () { $("#btn").click(function () { $("#link").html( "<a href='https://blog.bajarangisoft.com/blogs/'> https://blog.bajarangisoft.com/blogs/</a>"); alert("Url changed to https://blog.bajarangisoft.com/blogs"); }); }); </script> </html>