Tutorials using JS
Change text of link element
Given a link element in the document, change text of link element using JavaScript.
Solution
To change the text of a link element in the document using JavaScript, select the link element by the required selection criteria, and use Element.textContent
property. Set textContent
property for the link element with the required text.
const link = document.getElementById("link1");
link.textContent = "An updated link";
Program
In the following HTML code, we have a button element and a link element. When user clicks on the button, we change the text in the link element to 'New link'
.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Update text in link element</h2>
<button id="myBtn">Click me</button><br>
<a id="link1" href="/a-link/">Old Link</a><br>
<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
//get all the links in the document
const link = document.getElementById("link1");
link.textContent = "New link";
});
</script>
</body>
</html>