jQuery如何在运行时设置href属性

我们知道如何在HTML中设置锚点标签的href属性，但有时我们可能需要在运行时设置href属性，例如，当用户为我们提供一个url时，我们想在运行时设置它。我们可以在jQuery的帮助下做到这一点。

例子1：在这个例子中，使用jquery，我们将attr()方法设置为用户在输入标签中输入的url，当用户点击set href按钮时。

<!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>GeeksforGeeks</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>

输出:

如何在运行时设置href属性？

例子2：在这个例子中，我们用另一个锚标签替换div “link “中的锚标签，以改变href值。这是我们可以改变href属性值的另一种方式。

<!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>GeeksforGeeks</h1>
            <b>Set href attribute at runtime</b>
            <br>
            <div id="link">
                <a id="click" href=
"https://practice.geeksforgeeks.org/"
                     target="_blank">
                  https://practice.geeksforgeeks.org/
              </a>
              <button id="btn">Change url</button>
            </div>
        </center>
    </body>
 
    <script>
         $(document).ready(function () {$ ("#btn").click(function () {
                $("#link").html(
"<a href='https://www.geeksforgeeks.org/'>
       https://www.geeksforgeeks.org</a>");
  alert("Url changed to https://www.geeksforgeeks.org/");
            });
        });
    </script>
</html>

输出:

如何在运行时设置href属性？