How to create a link using javaScript?

Whenever you are developing a web application or website you will have to deal with URLs and links which are frequently used to navigate a user from one page to another, as there is no other way to navigate your users without links and URLs. Hence, you need to create them and put them in the exact places where you want to navigate the users.

Why do you need to create links with JavaScript

HTML allows you to put links inside the anchor tag under the href attribute. However, while developing a JavaScript-based application where you have to handle everything programmatically, you need to create links dynamically and assign them to the href attribute of the HTML anchor tag.

This is the major reason why you need JavaScript to create a link and this is what we are going to talk about in this article so let’s have a deep dive at how we can easily create a link using JavaScript.

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:


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.

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="">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 = "";

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.


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


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.

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

<button onclick = "createLink()">
    click here

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.href = "";

Once everything is in order and ready to be executed, let’s verify this and run the code.


Click the button and see if it is actually creating the link for us or not.

Here in the above screen, you can see that after clicking the button, the link was created successfully and displayed on our webpage. This link has given up with the address of which means if you click on it you will be directed to

Remember that we have appended the link in our JavaScript code that’s why it is appearing below everything. So now if you want to prepend the link to the top of some HTML element or at the top of the page then simply prepend the anchor tag instead of appending it to the body to achieve this objective.

Prepend the <a> tag
The only change that we need is to use “document.body.prepend” instead of “document.body.append” to prepend the anchor tag to the top of the page above every element.



As you can see above, the link was prepended on top of every HTML element and is clickable with the address attached to it.


Link can easily be created through JavaScript by first creating an <a> tag using createElement() method and later the link can be attached to the href attribute of <a> tag. This post has provided the complete function for creating a link totally through JavaScript without touching the HTML.  Moreover, we have discussed how to append or prepend the anchor tag “<a>” to the body using detailed examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.