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 do I change a tag's inner HTML based on their order in JavaScript?
The innerHTML property of an element in JavaScript allows you to access or modify any HTML or XML markup that is there. Use the method insertAdjacentHTML () to insert HTML into the page as opposed to changing an element's content.
In JavaScript to change a tag’s innerHTML based on their order can be done using document.querySelectorAll(). Let’s jump into the article to learn more about changing the tag’s innerHTML based on their order.
Using document.querySelectorAll()
The static NodeList returned by the Document function querySelectorAll() lists all of the document's elements that match the given set of selectors.
Syntax
Following is the syntax for document.querySelectorAll() −
querySelectorAll(selectors)
Let’s look into the following examples to understand more about changing a tag’s innerHTML based on their order.
Example
In the following example we are using the addEventListener with an anonymous function along with document.querySelectorAll().
<!DOCTYPE html>
<html>
<body>
<p class="motors">Bike</p>
<p class="motors">Car</p>
<p class="motors">Vehicle</p>
<button id="ordergenerator">Order Elements</button>
<script>
document.getElementById('ordergenerator').addEventListener('click', function(e) {
const paragraphs = document.querySelectorAll('.motors');
let i = 1;
for (p of paragraphs) {
p.innerText = 'vehicle ordered ' + (i++);
}
});
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with a click button on the webpage. If the user clicks the button, the event gets triggered and orders the text.
Example
Consider the following example, here we are numbering the paragraph elements and running a loop −
<!DOCTYPE html>
<html>
<body>
<p class="student">jeshu</p>
<p class="student">mani</p>
<p class="student">viswa</p>
<button onclick="generator()">Order Elements</button>
<script>
function generator() {
var reference = document.getElementsByClassName("student");
for (var i = 0; i < 3; i++) {
reference[i].innerHTML = i;
}
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the names along with a click button. When the user clicks the button, the event gets triggered and the numbers are assigned to the paragraph elements.
Example
Execute the below code to observe how changing a tag’s innerHTML based on their order takes place in JavaScript.
<!DOCTYPE html>
<html lang="en">
<body>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<button id="orderDemo">Click to Order the Paragraph</button>
<script>
document.getElementById('orderDemo').addEventListener('click', function(e) {
var allHTMLValues = document.querySelectorAll('.numberDemo');
var counter = 1;
for (temp of allHTMLValues) {
temp.innerText = 'The Paragraph is in order ' + (counter);
counter = counter + 1;
}
});
</script>
</body>
</html>
</pre>
When the script gets executed, it will display a text along with a click button on the webpage. If the user clicks the button, the event gets activated, orders the text, and displays it on the webpage.
530 Views
To Continue Learning Please Login