Change the Text of a Link element using JavaScript

avatar

Borislav Hadzhiev

Tue Jan 04 20222 min read

banner

Photo by Tamara Bellis

Change the Text of a Link element using JavaScript #

Use the textContent property to change the text of a link element, e.g. link.textContent = 'Replacement link text'. The textContent property will set the text of the link to the provided string, replacing any of the existing content.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <a id="link" href="https://example.com">Visit Example.com</a> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const link = document.getElementById('link'); // โœ… Change (replace) the text of the link link.textContent = 'Replacement link text'; // โœ… Change (replace) the content with HTML link.innerHTML = `<span style="background-color: pink">Replacement HTML</span>`; // โœ… Append / Prepend text to the link link.insertAdjacentText('beforeend', ' appended text'); // โœ… Append / Prepend HTML to the link link.insertAdjacentHTML( 'beforeend', `<span style="background-color: cyan"> appended HTML</code>`, );

We used the textContent property on the anchor element to change its text content.

The textContent property can also be used to read the text content of the element and its descendants.

Setting textContent on an element, removes all of the element's children and replaces them with a single text node with the provided string.

If you need to completely replace the HTML content of the anchor, use the innerHTML property.

index.js
const link = document.getElementById('link'); link.innerHTML = `<span style="background-color: pink">Replacement HTML</span>`;

The innerHTML property gets or sets the HTML contained within the element.

By setting the property on an element, you effectively replace the HTML previously contained in the a tag.

You shouldn't use user generated data without escaping it when setting the HTML of an element, because it would leave your application vulnerable to XSS attacks.

If you need to append / prepend text to the existing content of the a element, use the insertAdjacentText method instead.

index.js
const link = document.getElementById('link'); // โœ… Append / Prepend text to the link link.insertAdjacentText('beforeend', ' appended text');

The insertAdjacentText method takes the following 2 parameters:

  1. position - the position relative to the element of where the text should be inserted. Can be one of the following 4:
  • beforebegin - before the element itself.
  • afterbegin - just inside the element, before its first child.
  • beforeend - just inside the element, after its last child.
  • afterend - after the element itself.
  1. data - the string from which to create a new text node to insert at the given position.
In the example, we inserted text just inside the a element, before its last child, but you can change the value of the position parameter depending on your use case.

If you need to insert HTML to the anchor element, use the insertAdjacentHTML method.

index.js
const link = document.getElementById('link'); // โœ… Append / Prepend HTML to the link link.insertAdjacentHTML( 'beforeend', `<span style="background-color: cyan"> appended HTML</code>`, );

The first parameter the insertAdjacentHTML method takes is the same as insertAdjacentText - the position at which the HTML should be inserted.

The second parameter is an HTML string containing the content you want to insert.

Note that this method shouldn't be used with user provided data without it being escaped, as it would leave you open to cross-site scripting attacks.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee