Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How To Change Text Inside All HTML Tags Using JavaScript
In this article, we are going to perform the task of changing text inside all HTML tags using JavaScript. Let's dive into the article to learn more about changing text within all HTML, but first, let's define HTML tags.
What are HTML Tags
An HTML tag is a segment of markup language used to denote the start and end of an HTML element in an HTML document. HTML tags, which are a component of an HTML element, assist web browsers in turning HTML documents into web pages.
For getting better understanding on changing text inside all HTML tags using JavaScript, let's look into the following examples.
Using getElementById() and innerHTML
The most common approach is to select an element by its ID and change its content using the innerHTML property.
Example
In the following example, we are creating a simple webpage where we are going to change the text by running the script.
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>
Click on the button to change the text
</h2>
<label id="tutorial">
Welcome to Tutorialspoint
</label>
<br>
<button onclick="changetext()">
Click Here!
</button>
<script>
function changetext() {
var x = document.getElementById("tutorial");
if (x.innerHTML === "Welcome to Tutorialspoint") {
x.innerHTML = "The Best E-way Learning";
} else {
x.innerHTML = "Welcome to Tutorialspoint";
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text and a click button. If the user clicks the button, the text will get changed and another text will be displayed on the webpage.
Using replaceWith()
The Element.replaceWith() method substitutes a group of Node or string objects for this Element in the children list of its parent. Equivalent Text nodes are inserted for String objects.
Syntax
ChildNode.replaceWith(Node);
Example
Consider the following example, where we are using the replaceWith() to change the text inside the tag.
<!DOCTYPE html>
<html>
<body>
<h2 id="tutorial">
<span class="quotation">"</span>
Lost in the ave of you
<span class="quotation">"</span>
</h2>
<script>
const changed = document.getElementById('tutorial');
changed.childNodes[2].replaceWith('Welcome');
</script>
</body>
</html>
"Welcome"
On running the above script, the output window will display the text that was replaced with the original text that was used in the script on the webpage.
Using querySelector()
When a selector or set of selectors is provided, the Document method querySelector() returns the first Element in the document that matches them. Null is returned if there are no matches.
Syntax
querySelector(selectors)
Example
Execute the below code where we are using the querySelector() to change the text in HTML tag.
<!DOCTYPE html>
<html>
<body>
<h1>Welcome</h1>
<script>
document.querySelector("h1").textContent = 'Tutorialspoint';
</script>
</body>
</html>
Tutorialspoint
When the scripts get executed, they will generate an output consisting of a text on the webpage that has been replaced with the original text used in the tag.
Using querySelectorAll() for Multiple Elements
To change text in all elements of the same type, use querySelectorAll() which returns a NodeList of all matching elements.
Example
<!DOCTYPE html>
<html>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<script>
const allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach((p, index) => {
p.textContent = `Updated paragraph ${index + 1}`;
});
</script>
</body>
</html>
Updated paragraph 1 Updated paragraph 2 Updated paragraph 3
Key Differences
| Method | Use Case | Returns |
|---|---|---|
getElementById() |
Single element by ID | Element or null |
querySelector() |
First matching element | Element or null |
querySelectorAll() |
All matching elements | NodeList |
Conclusion
JavaScript provides multiple methods to change text in HTML elements. Use getElementById() for single elements, querySelector() for CSS selector flexibility, and querySelectorAll() when targeting multiple elements at once.
1K+ Views
