In this tutorial we will show you the solution of how to set href value of anchor tag in JavaScript and we will understand that how to change the value of href attribute of anchor tag and also see how to change text value of that tag also.
Now, let us understand this with the help of codes.
Step By Step Guide On How To Set href Value Of Anchor Tag In JavaScript :-
As, there are many ways to done this task. In this article, we show you one method and you to done another using same pattern of code.
Now, let us show you the code in which we change value of href using id in JavaScript and you have to done the same task using query selectors.
<!DOCTYPE html>
<html>
<head>
<title>
Title of the document is here
</title>
</head>
<body style="text-align:center;">
<h1>
How to set href value of anchor tag using JavaScript
</h1>
<h3>
This article is done using id attribute, you can see below
</h3>
<a href="https://www.instagram.com" id="link_here">
Go to Instagram
</a>
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<script type="text/javascript">
function myFunction() {
document.getElementById('link_here').href
="https://www.facebook.com";
document.getElementById("link_here")
.textContent = "Visit to Facebook";
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, as you see that we create two heading, first one is created using heading one and other is done with the help of heading three. And one thing to note here that in body we use text align center. It means that all the content written inside body align to center.
- After that here we create a link with text go to instagram and give id to this anchor tag. And after that we create a button and use a function on click on button.
- Now, let us discuss script. Here, we create a function that run on button click. Under this function we change the value of href attribute of anchor tag with the help of id. And then we change the text with the help of text content method. We hope that you understand the concept properly.
- You can use body these lines that are given inside function separately and use in pair also.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to set href value of anchor tag in JavaScript.
I hope this tutorial on how to set href value of anchor tag in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
