One of the most common ways to change the text inside a <span> element is to use the innerHTML property. This property allows you to set the content within an element, effectively replacing any text or HTML that was previously contained within it. For example:
const spanElement = document.querySelector('#my-span'); spanElement.innerHTML = 'New Text';
This code would select the <span> element with an ID of “my-span” and replace its contents with the string “New Text”.
Another option is to use the textContent property, which sets or returns the text content of an element. Unlike innerHTML, textContent only sets or returns the plain text of the element, without any HTML tags. For example:
const spanElement = document.querySelector('#my-span'); spanElement.textContent = 'New Text';
Once we have selected an element, we can modify its properties by accessing its properties and methods. For example, we can change the content of an element using the innerHTML property, modify its styles using the style property, and add or remove classes using the classList property.
In addition to manipulating elements directly, we can also add event listeners to elements to respond to user interactions, such as clicks, mouse movements, and keyboard inputs.
Here’s an example:
// get the <span> element const spanElement = document.querySelector('span'); // change the text content spanElement.textContent = 'New Text Content';
In the code above, we first use the
document.querySelector() method to get the <span> element. This method takes a CSS selector as a parameter and returns the first matching element found in the document. If there are no matches, it returns
Once we have a reference to the <span> element, we can change its text content by setting the
textContent property to a new value. In the example, we set it to ‘New Text Content’, but you can replace it with any text you want.
By using this method, you can easily update the text inside a <span> element in real-time, without having to reload the page.
innerHTML property to change the contents of the element.
For example, let’s say you have the following HTML code:
<span id="mySpan">This is my custom text</span>
document.getElementById("mySpan").innerHTML = "This is my new custom text";
With this code, the text inside the <span> element will be changed to “This is my new custom text”.
You can also use the
style property to add custom CSS styles to the <span> element:
document.getElementById("mySpan").style.color = "red";
With this code, the text inside the <span> element will be changed to red.
Best Practices for Changing Text Content Inside <span>
Here are some best practices to keep in mind when changing text content inside a element:
Use the right method: There are a few different methods you can use to change the text content inside a , such as .innerText, .innerHTML, and .textContent. Be sure to use the appropriate method based on your specific needs, keeping in mind security implications and the potential for HTML injection.
Use variables: Instead of hardcoding the text content inside a element, store it in a variable. This makes it easier to change the text content later in your code without having to go through your entire file and manually change it.
Use event listeners: If you’re changing the text content inside a based on user interaction, use event listeners like .addEventListener() to ensure that the text is updated in real-time as the user interacts with the page.
One of the most commonly used techniques is the Document Object Model (DOM) manipulation. The DOM is a representation of an HTML document as an object hierarchy. By accessing and manipulating these objects, you can change the content and structure of the document dynamically.
In this example, we have a element with the ID “demo”. We use the getElementById() method to select the element and then use the innerHTML property to change the text inside the element.
// select the element var span = document.getElementById("demo"); // change the text inside the element span.innerHTML = "new text";
In this example, we create a new element, set its text using the createTextNode() method, and then append it to an existing element using the appendChild() method.
// create a new span element var span = document.createElement("span"); // set the text of the span element var text = document.createTextNode("new text"); span.appendChild(text); // append the span element to an existing element document.body.appendChild(span);