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

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

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

html

    
        
        
        
        
        
        Set href attribute at runtime
        
            #btn {
                background-color: #4caf50;
                color: white;
            }
            input {
                color: #4caf50;
            }
            a {
                color: #4caf50;
            }
            h1 {
                color: green;
            }
        
    
    
        
            GeeksforGeeks
            Set href attribute at runtime
            
            
            Set href
            
                
                    link
                
           
        
    
 
    
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#click").attr("href",
                $('input[name$="url"]').val());
            });
        });
    

输出：

示例 2：在此示例中，我们将 div ‘link’ 中的锚标记替换为另一个锚标记以更改href值。这是我们可以更改href属性值的另一种方式。

html

    
        
        
        
        
        
        Set href attribute at runtime
        
            #btn {
                background-color: #4caf50;
                color: white;
            }
            input {
                color: #4caf50;
            }
            a {
                color: #4caf50;
            }
            h1 {
                color: green;
            }
        
    
    
        
            GeeksforGeeks
            Set href attribute at runtime
            
            
                
                  https://practice.geeksforgeeks.org/
              
              Change url
            
        
    
 
    
        $(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/");
            });
        });
    

输出：