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:
Table of Content
Approach 1: Using InnerHTML Property
- The
innerHTMLproperty 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
innerHTMLproperty 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.
HTML
<!DOCTYPE html> <html> <head> <title>Change Text using innerHTML</title> </head> <body> <h1 style="background-color: lightblue"> Hello Geeks!. </h1> <p> This is a simple paragraph. </p> <div> <p> Another paragraph inside a div. </p> </div> <button id="changeContentButton"> Change Content </button> <script> const elements = document.querySelectorAll("*"); const buttonText = "Welcome to neveropen......"; // Function to change content function changeContent() { for (const element of elements) { element.innerHTML = buttonText; } } // Add a click event listener to the button const changeButton = document.getElementById("changeContentButton"); changeButton.addEventListener( "click", changeContent); </script> </body> </html> |
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.
HTML
<!DOCTYPE html> <html> <head> <title> Change Text using the TextNode. </title> </head> <body> <h1>hello Geeks.</h1> <p>This is a simple paragraph.</p> <div> <p>Paragraph inside a div.</p> </div> <button id="changeContentButton"> Change Content </button> <script> function changeText(node) { if (node.nodeType === Node.TEXT_NODE) { node.data = ".....Welcome to neveropen....."; } else if ( node.nodeType === Node.ELEMENT_NODE ) { for (const childNode of node.childNodes) { changeText(childNode); } } } // Function to handle button click function handleButtonClick() { changeText(document.body); } // Add a click event listener to the button const changeButton = document.getElementById("changeContentButton"); changeButton.addEventListener( "click", handleButtonClick); </script> </body> </html> |
Output:
