How to Create a Link in JavaScript ?

Last Updated : 09 Jan, 2025

In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().

Here are some common approaches to Create a Link in JavaScript:

Table of Content

Using createElement and appendChild() Method
Using createElement and prepend() Method
Using innerHTML

Using createElement and appendChild() Method

The createElement and appendChild approach involves creating an HTML element (like <a>) using a document.createElement(), setting its attributes (e.g., href), appending text or other nodes using appendChild(), and then inserting it into the DOM with `appendChild().

Example 1: In this example, we create a button that, when clicked, dynamically generates a hyperlink using JavaScript. The link points to "https://www.geeksforgeeks.org" and is displayed on the webpage.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Using createElement and appendChild() Method
    </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>
        let el_up = document.getElementById("GFG_UP");
        let 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.
            let a = document.createElement('a');

            // Create the text node for anchor element.
            let 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:

Raja Software Labs Recruitment Process

Using createElement and prepend() Method

The Using createElement with prepend for DOM Manipulation approach dynamically creates HTML elements, such as links, using createElement. It sets attributes like href and text content, then inserts the element at the start of a specified parent element using prepend.

Example : In this example we dynamically creates a link using createElement and prepend. Clicking the button generates an anchor element with specified text, title, and URL, adding it to the top of the body.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Using createElement and prepend
    </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>
        let el_up = document.getElementById("GFG_UP");
        let 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.
            let a = document.createElement('a');

            // Create the text node for anchor element.
            let 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:

Raja Software Labs Recruitment Process

Using innerHTML

The innerHTML approach involves setting the HTML content of an element directly by assigning a string that includes the desired HTML tags, like an anchor <a>. This method is quick for inserting HTML but can overwrite existing content and disrupt event listeners.

Example: In this example innerHTML is used to insert HTML content directly into the element with id="GFG_DOWN", allowing the creation of a link dynamically when the button is clicked.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>
       Using innerHTML
    </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>
        let el_up = document.getElementById("GFG_UP");
        
        let el_down = document.getElementById("GFG_DOWN");

        el_up.innerHTML = "Click on the button to generate "
            + "a link using JavaScript.";

        function GFG_Fun() {
            // Use innerHTML to create and insert the link
            el_down.innerHTML = 
'<a href="https://www.geeksforgeeks.org" title="This is Link">This is link</a>';
        }
    </script>
</body>

</html>

Output:

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.