JavaScript 如何创建链接

给定一个HTML文档，任务是使用JavaScript创建一个JavaScript链接并将其添加到文档中。

方法：

创建一个锚点<a>元素。
创建一个带有文本的文本节点，该文本将显示为链接。
将文本节点附加到锚点<a>元素。
设置<a>元素的title和href属性。
将<a>元素附加到body中。

示例1： 在这个示例中，节点由JavaScript方法创建并设置属性。

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            How to create a link in JavaScript? 
        </title> 
    </head>  
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" >  
            GeeksForGeeks 
        </h1> 
          
        <p id = "GFG_UP" style = 
            "font-size: 19px; font-weight: bold;"> 
        </p> 
          
        <button onclick = "GFG_Fun()"> 
            click here 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;"> 
        </p> 
          
        <script> 
            var el_up = document.getElementById("GFG_UP"); 
            var el_down = document.getElementById("GFG_DOWN"); 
              
            el_up.innerHTML = "Click on the button to generate " 
                    + "a link using JavaScript."; 
              
            function GFG_Fun() { 
                  
                // Create anchor element. 
                var a = document.createElement('a');  
                  
                // Create the text node for anchor element. 
                var link = document.createTextNode("This is link"); 
                  
                // Append the text node to anchor element. 
                a.appendChild(link);  
                  
                // Set the title. 
                a.title = "This is Link";  
                  
                // Set the href property. 
                a.href = "https://www.geeksforgeeks.org";  
                  
                // Append the anchor element to the body. 
                document.body.appendChild(a);  
            } 
        </script>  
    </body>  
</html>

输出：

JavaScript 如何创建链接

示例2： 此示例与上面类似，但使用prepend()方法将锚元素添加到body中。

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            How to create a link in JavaScript ? 
        </title> 
    </head>  
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" >  
            GeeksForGeeks 
        </h1> 
          
        <p id = "GFG_UP" style = 
            "font-size: 19px; font-weight: bold;"> 
        </p> 
          
        <button onclick = "GFG_Fun()"> 
            click here 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;"> 
        </p> 
          
        <script> 
            var el_up = document.getElementById("GFG_UP"); 
            var el_down = document.getElementById("GFG_DOWN"); 
              
            el_up.innerHTML = "Click on the button to generate " 
                    + "a link using JavaScript."; 
              
            function GFG_Fun() { 
                  
                // Create anchor element. 
                var a = document.createElement('a');  
                  
                // Create the text node for anchor element. 
                var link = document.createTextNode("This is link"); 
                  
                // Append the text node to anchor element. 
                a.appendChild(link);  
                  
                // Set the title. 
                a.title = "This is Link";  
                  
                // Set the href property. 
                a.href = "https://www.geeksforgeeks.org";  
                  
                // Append the anchor element to the body. 
                document.body.prepend(a);  
            } 
        </script>  
    </body>  
</html>

输出：

JavaScript 如何创建链接