You will know how to change the text of a span element using JavaScript using a variety of methods, namely innerHTML/textContent/innerText, and text(). This is one of the most important skills when you work with elements’ content in Javascript.
Change the text of a span element using JavaScript
Using innerHTML/textContent/innerText
These are not methods or functions; instead, each is an attribute that belongs to every element in your HTML document. It can help you change the content (text) inside the element on which you are calling the attribute. For example, using innerHTML:
<html>
<body>
<span id="target">LearnShareIT <button>LearnShareIT</button> </span>
<script>
// Get the span element
let span = document.getElementById("target");
// Change the text of a span element
span.innerHTML = "Learn Share IT";
</script>
</body>
</html>Output:
Learn Share ITThe example above shows that we first print the property innerHTML of the span element before we change it (in the last statement) to “Learn Share IT” instead of LearnShareIT. As you can see, this attribute not only returns a text inside an element but it also returns any HTML element that is declared inside it, such as <button> in the example above. However, this approach is said to be unsafe, and most programmers advise you not to use it. Therefore, you could use the textContent or innerText as follows:
<html>
<body>
<span id="target">LearnShareIT <button> LearnShareIT</button></span>
<script>
// Get the span element
let span = document.getElementById("target");
// Change the text of a span element
span.textContent = "Learn Share IT";
</script>
</body>
</html>Output:
Learn Share ITAs can be seen, this textContent only returns the text inside the element instead of tags inside it like the innerHTML. Moreover, you can also use the innerText, which is another attribute that works like textContent:
<html>
<body>
<span id="target">LearnShareIT <button>LearnShareIT</button> </span>
<script>
// Get the span element
let span = document.getElementById("target");
// Change the text of a span element
span.innerText = "Learn Share IT";
</script>
</body>
</html>Output:
Learn Share ITAs you can see, this innerText attribute works as well as others. It is the most recommended approach used by many programmers. Also remember that, in some browsers, the innerText attribute is not valid but the textContent is valid, and vice versa. So you should decide the method to use depending on your web browsers. If you want to support all, you can use the next method.
Using jQuery text()
jQuery is a fast, small, external JavaScript library. You will need to import the library by declaring this <script> tag before your <script> tag:
Here is the syntax and usage of text() method in jQuery
Syntax:
$(selector).text(value);
Parameter:
- selector: The selector (css selector is also valid) in which you will use to get the span element you want.
- value: the text you want to change in the span
<html>
<body>
<span id="target">LearnShareIT <button>LearnShareIT</button> </span>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// Get the span element
let span = $("#target");
// Change the text of a span element
span.text("Learn Share IT");
</script>
</body>
</html>Output:
Learn Share ITIn short, by using an external method from jQuery, we can have the same results as expected as other ones. Moreover, we don’t have to care about whether your browser supports or not because it works in all browsers.
Summary
We have learned to change the text of a span element using JavaScript using two different ways. If you have any questions, please leave us a reply below and we will answer soon. Have a nice day!
Maybe you are interested:
- Change the Text of a Link element using JavaScript
- Change the Text of a Label element using JavaScript
- Change the Text of a Div Element using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
