In this article, you are going to learn how to create a link (anchor element) using javascript. Suppose, you want to make a link and when someone will click on that link, he will be redirected to a new page.
There are some steps to dynamically create a link using javascript.
- Call the document.createElement("a") method and assign it to a variable named aTag .
- Then assign some text to the anchor <a> element with aTag.innerHTML property which will display as a link .
- Set the title and href property of the <a> element with the help of aTag.title="" and aTag.href="" .
- Finally, append the created <a> element to the body tag using document.body.appendChild() method.
aTag is the name of the variable.
Create an anchor tag dynamically
let aTag = document.createElement('a');
aTag.innerHTML="I am a link";
aTag.href="https://www.3schools.in";
aTag.title="3schools";
document.body.appendChild(aTag);
Try it Yourself »
You can also use the setAttribute() method instead of href="" property to set the link address. To open the link in a new tab, include the target attribute to the <a> tag and set its value to _blank.
<script>
let aTag = document.createElement('a');
aTag.innerHTML = 'I am a link';
aTag.setAttribute('href','http://www.3schools.in');
aTag.setAttribute('target', '_blank');
document.body.appendChild(aTag);
</script>
Append the <a> element inside a div element.
You can add the created anchor (<a>) element anywhere you want.
Append anchor element to a div dynamically
let divContainer = document.getElementById("container");
let aTag = document.createElement('a');
aTag.innerHTML = 'I am a link';
aTag.setAttribute('href', 'http://www.3schools.in');
divContainer.appendChild(aTag);
Try it Yourself »
Create anchor element using write() method.
Example using write() method
document.write('I am a link');
Try it Yourself »
Comments (3)
How to create a link in JavaScript
<script>
var link = document.createElement('a');
link.href = 'https://www.example.com';
link.textContent = 'Click Here';
document.body.appendChild(link);
</script>
This will create a new link on the page with the text "Click Here".
var currentHour = new Date().getHours();
if (currentHour === 12) {
var anchorElement = document.createElement('a');
anchorElement.textContent = 'Click me for something cool!';
anchorElement.href = 'https://www.example.com';
document.body.appendChild(anchorElement);
} else {
var buttonElement = document.createElement('button');
buttonElement.textContent = 'Sorry, try again later.';
document.body.appendChild(buttonElement);
}
This code first gets the current hour using the getHours() method of new Date(). It then checks if the hour is equal to 12, and creates either an anchor or button element based on the result. The textContent property is used to set the text within the elements, and the appendChild() method adds them to the document body.