How to create a link in JavaScript ?

At whatever point you are fostering a web application or site you should manage URLs and connections which are often used to explore a client starting with one page then onto the next, as there could be no alternate method for exploring your clients without connections and URLs. Henceforth, you want to make them and put them in the specific spots where you need to explore the clients.

Table of Contents

For what reason do you want to make joins with JavaScript

HTML permits you to put joins inside the anchor tag under the href characteristic. Nonetheless, while fostering a JavaScript-based application where you need to deal with everything automatically, you really want to make interfaces progressively and appoint them to the href property of the HTML anchor tag.

This is the significant motivation behind why you really want JavaScript to make a connection and this is the thing that we will discuss in this article so we should have a profound plunge at how we can undoubtedly make a connection utilizing JavaScript. I have a string for a title and a string for a connection. I don’t know how to assemble the two to make a connection on a page utilizing Javascript. Any assistance is valued.

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 = "site"; 
                 
                // Append the anchor element to the body.
                document.body.appendChild(a); 
            }
        </script> 
    </body> 
</html>                   

Approach to Create a link

To create a link programmatically, we first understand what exactly we need to do.

First, we need to create an anchor tag using javaScript:

<a></a>

Create an anchor <a> tag
For creating an anchor, we can utilize the code provided below. Create an element(<a> tag) and assign it to the variable named “anchor” as we will need it later:

let anchor = document.createElement(‘a’);

After creating the anchor tag, we need to write some text inside the <a> tag as demonstrated below:

<a>Linuxhint website<a/>

Write text into the <a> tag
For writing some text inside the <a> tag, first create a text node and then append that text node as a child to the anchor tag. The code for writing text into the anchor tag will go like this:

//create a text node and assign it to the “link” variable.
let textNode = document.createTextNode(“Linuxhint Website”);

// Append the textNode as a child to anchor.
anchor.appendChild(textNode);

At this stage, the text is appended into the anchor <a> tag. Now, we need to put the link in the href attribute of the anchor <a> tag as shown below.

<a href=“https://linuxhint.com/”>Linuxhint Website<a/>

Set the href attribute of <a> tag
To put the link in the href attribute of <a> tag, the following line of javaScript code will be used:

anchor.href = “https://linuxhint.com/”;

After setting the href attribute, the only thing left is to append the <a> tag where we want it to be put.

Append the <a> tag to HTML body
To append the anchor tag to the body, use the following line of code.

document.body.appendChild(anchor);

Alright, you have learned all the procedure to create a link using javaScript. Let’s go through an example to demonstrate the results.

Example

Let’s take a simple example where we will simply create a link and append it to the HTML body and will checkout the behavior of the link if it is working or not.

HTML
First, we will create a button and at the click of that button the createLink() method will be called.

<button onclick = “createLink()”>
click here
</button>

JavaScript
All the code for creating the link will be written inside the createLink() function and the whole JavaScript code will go like this:

function createLink() {
let anchor = document.createElement(‘a’);
let link = document.createTextNode(“Linuxhint Website”);
anchor.appendChild(link);
anchor.href = “https://linuxhint.com/”;
document.body.appendChild(anchor);

How do I create a link using javascript?

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

With JavaScript

var a = document.createElement('a');
a.setAttribute('href',desiredLink);
a.innerHTML = desiredText;
// apend the anchor to the body
// of course you can append it almost to any other dom element
document.getElementsByTagName('body')[0].appendChild(a);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

or, as suggested by @travis :

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>

With JQuery

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

In all the above examples you can append the anchor to any element, not just to the ‘body’, and desiredLink is a variable that holds the address that your anchor element points to, and desiredText is a variable that holds the text that will be displayed in the anchor element.

Create links using JavaScript:

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

Also Read: Round() in C++