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 do I change a tag\'s inner HTML based on their order in JavaScript?
In JavaScript, you can change a tag's innerHTML based on their order using document.querySelectorAll() or getElementsByClassName(). These methods return collections of elements that you can iterate through and modify based on their position in the DOM.
This technique is useful for numbering elements, adding order-based content, or applying different innerHTML to similar elements based on their sequence.
Using document.querySelectorAll()
The querySelectorAll() method returns a static NodeList containing all elements that match the specified CSS selector(s).
Syntax
document.querySelectorAll(selectors)
Example 1: Basic Order Assignment
Here's how to change innerHTML based on element order using 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() {
const paragraphs = document.querySelectorAll('.motors');
let counter = 1;
paragraphs.forEach(function(paragraph) {
paragraph.innerHTML = 'Vehicle ordered: ' + counter;
counter++;
});
});
</script>
</body>
</html>
Example 2: Using getElementsByClassName()
You can also use getElementsByClassName() to achieve the same result:
<!DOCTYPE html>
<html>
<body>
<p class="student">Student Name</p>
<p class="student">Student Name</p>
<p class="student">Student Name</p>
<button onclick="assignNumbers()">Assign Numbers</button>
<script>
function assignNumbers() {
const students = document.getElementsByClassName("student");
for (let i = 0; i < students.length; i++) {
students[i].innerHTML = "Student #" + (i + 1);
}
}
</script>
</body>
</html>
Example 3: Advanced Order-Based Content
This example demonstrates more complex innerHTML changes based on element order:
<!DOCTYPE html>
<html>
<body>
<div class="item">Original Content</div>
<div class="item">Original Content</div>
<div class="item">Original Content</div>
<button id="updateContent">Update Based on Order</button>
<script>
document.getElementById('updateContent').addEventListener('click', function() {
const items = document.querySelectorAll('.item');
const positions = ['First', 'Second', 'Third'];
items.forEach(function(item, index) {
item.innerHTML = '<strong>' + positions[index] + ' Item</strong><br>Position: ' + (index + 1);
});
});
</script>
</body>
</html>
Key Methods Comparison
| Method | Return Type | Live Collection? | CSS Selectors? |
|---|---|---|---|
querySelectorAll() |
Static NodeList | No | Yes |
getElementsByClassName() |
Live HTMLCollection | Yes | No |
Common Use Cases
- Numbering items: Adding sequential numbers to list items or elements
- Ranking systems: Displaying ranks or positions dynamically
- Step indicators: Creating step-by-step guides with order-based content
- Dynamic content: Updating multiple elements with position-specific information
Conclusion
Use querySelectorAll() to select elements and iterate through them to change innerHTML based on their order. The forEach() method or traditional for loops work well for this purpose, allowing you to apply different content based on element position.
738 Views
