How to create a link in JavaScript ?

20 Jul, 2021
Given an HTML document and the task is to create a JavaScript link and add it to the document using JavaScript.
Approach:
Create an anchor <a> element.
Create a text node with some text which will display as a link.
Append the text node to the anchor <a> element.
Set the title and href property of the <a> element.
Append <a> element in the body.
Example 1: In this example, the node is created and the attributes are set by the JavaScript methods.
<!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>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example is similar to the above but uses prepend() method to add anchor element to the 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>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.