Working fluently with links with a front-end developer is an essential skill. In this article, I will show you how to change the text of a link element using JavaScript.
How to change the text of a link element using JavaScript
See below how we can change the link’s text every time we click on them using only Javascript.
Using innerHTML method
The innerHTML property in JavaScript can be used to write dynamic HTML on HTML web pages. In this way, we will use the innerHTML method to change the entire HTML inside the link tag that we click on. To do this, we must point to that link and assign its functions to change the HTML.
Code:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script type=" text/javascript">
function handleOpen() {
document.getElementById("link").innerHTML =
"<a href='javascript:handleClose()'>CLOSE</a>";
}
function handleClose() {
document.getElementById("link").innerHTML =
"<a href='javascript:handleOpen()'>OPEN</a>";
}
</script>
</head>
<body>
<h2>Change the Text of a Link element using JavaScript | LearnShareIT</h2>
<hr/>
<div id="link"><a href="javascript:handleOpen()">OPEN</a></div>
</body>
</html>
</html>Output:
By using getElementById(), we can point to the link tag we need to listen for. When clicked, the HTML inside the tag will be replaced with a link tag with another text. The method has the disadvantage that it is pretty manual and lengthy because we have up to three parts of HTML code to be written, and it could be more user-friendly.
Using the text attribute method
This way, we will access the text value of the element tag and replace its value when there is a link click event. You can customize this change function to your liking. See the example below to understand more about how to do it.
Code:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script type=" text/javascript">
const onChange = () => {
const link = document.getElementById("link");
link.text = link.text === "OPEN" ? "CLOSE" : "OPEN";
};
</script>
</head>
<body>
<h2>Change the Text of a Link element using JavaScript | LearnShareIT</h2>
<hr />
<div><a id="link" href="javascript:onChange()">OPEN</a></div>
</body>
</html>
</html>The results of the two methods are the same. You can change the text value inside the link <a> tag by accessing element.text with the element as the link tag. In the above code, we use the operating condition when the text value is equal to “OPEN”, it will change to “CLOSE” and if it is the opposite, change it back so that you can change the value of the text inside the link based on its current text. Wish you success with the two ways mentioned in the article.
Summary
To sum up, this article showed you how to change the text of a link element using JavaScript. It would help if you used an element.text to replace only the text inside the link tag. Good luck for you.
Maybe you are interested:
- Change the Text of a Label element using JavaScript
- Change the Text of a Div Element using JavaScript
- How To Get The Text Of A Div Element Using JavaScript
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs