Get the Text of a Span element using JavaScript

avatar

Borislav Hadzhiev

Tue Jan 04 20223 min read

banner

Photo by Caleb Frith

Get the Text of a Span element using JavaScript #

Use the textContent property to get the text of a span element, e.g. const text = span.textContent. The textContent property will return the text content of the span and its descendants. If the element is empty, an empty string is returned.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <span id="span"> Tomato, <span style="background-color: lime">Broccoli</span>, Cauliflower </span> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const span = document.getElementById('span'); // ๐Ÿ‘‡๏ธ Tomato, Broccoli, Cauliflower const text1 = span.textContent; console.log(text1); // ๐Ÿ‘‡๏ธ Tomato, Broccoli, Cauliflower const text2 = span.innerText; console.log(text2);

We used the textContent property to get the text content of the span and its descendants.

The property returns the concatenation of the text content of every child node, excluding comments.

If the span element were empty, the property would return an empty string.

You might get leading or trailing spaces when using textContent depending on the structure of your HTML. If you need to remove any leading or trailing spaces, use the trim() method.

index.js
const span = document.getElementById('span'); // ๐Ÿ‘‡๏ธ Tomato, Broccoli, Cauliflower const text1 = span.textContent.trim(); console.log(text1);

The code snippet also showed that we can use the innerText property to get the text content of an element and its descendants.

index.js
const span = document.getElementById('span'); // ๐Ÿ‘‡๏ธ Tomato, Broccoli, Cauliflower const text2 = span.innerText; console.log(text2);

However, there are some important differences between the textContent and innerText properties:

  1. textContent gets the content of all elements, including script and style elements, whereas innerText only gets the content of "human-readable" elements.
  2. innerText is aware of styling and does not return the text of hidden elements, whereas textContent does not take styles into consideration.
  3. using textContent can prevent cross-site scripting attacks.
Because innerText takes CSS styles into account, when the property is accessed, a reflow is triggered to ensure the styles are up-to-date.

Reflows can be expensive and should be avoided when possible.

When you use textContent and innerText to set the element's text content, the element's child nodes get removed.

When using the textContent and innerText properties to update the text content of the element, the child nodes of the element get replaced with a single text node with the provided string value.

If you need to set an element's text content, use the insertAdjacentText method instead.

index.js
const span = document.getElementById('span'); // โœ… Insert text into the span element span.insertAdjacentText('beforeend', ', Celery'); // โœ… Insert HTML into the span element span.insertAdjacentHTML( 'beforeend', '<span style="background-color: orange;">, Carrot</span>', );

The insertAdjacentText method does not remove the child nodes of the element it was called on.

The 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 added a string inside of the element, after its last child, however you can update the first parameter of the method depending on your use case.

The example also shows how to use the insertAdjacentHTML method to insert HTML into the span element.

The insertAdjacentHTML method takes the same first parameter as insertAdjacentText - the position.

index.js
const span = document.getElementById('span'); span.insertAdjacentHTML( 'beforeend', '<span style="background-color: orange;">, Carrot</span>', );

Note that you shouldn't use this method to insert user generated content without escaping it.

This would leave you vulnerable 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