In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic user interfaces.

Changing the text inside HTML tags using JavaScript involves accessing the DOM (Document Object Model) & manipulating the text nodes of HTML elements. JavaScript provides multiple approaches to achieve this and allows you to update the text content of the specific elements or all elements on a page. Possible approaches to achieve this task are:

Approaches to Change Text Inside All HTML Tags:

Approach 1: Using InnerHTML Property

• The innerHTML property is used to access or modify the HTML content within the element.
• To change the text inside all HTML tags using this approach you would traverse through all the elements on the page & set the innerHTML property for each element of the desired text.

Syntax

// Changing text using innerHTML property
const elements = document.querySelectorAll("*");
for (const element of elements) {
    element.innerHTML = "Your new text here";
}

Example: This example describes the implementation of the above-explained approach.

Output:

Approach 2: Using TextNode

• In this approach, you directly target the text nodes of each element & modify their text content.
• It involves iterating through all elements and their child nodes identifying the text nodes & updating their data.

Syntax

// Changing text using text nodes
function changeText(node) {
    if (node.nodeType === Node.TEXT_NODE) {
        node.data = "Your new text here";
    } else if (node.nodeType === Node.ELEMENT_NODE) {
        for (const childNode of node.childNodes) {
            changeText(childNode);
        }
    }
}
// Call the function with the root node of the document
changeText(document.body);

Example: This example shows the use of the aboveexplained approach.

Output: