Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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
Following is the syntax for replaceWith() -
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>
On running the above script, the output window will pop up, displaying 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 given back if there are no matches.
Syntax
Following is the syntax for querySelector()
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>
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.
904 Views
