- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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?
For this, use document.querySelectorAll().
Example
Following is the code −
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <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> </body> <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> </html>
To run the above program, save the file name “anyName.html(index.html)”. Righ click on the file and select the option “Open with Live Server” in Visual Studio Code editor.
Output
This will produce the following output on console −
On clicking the button, you will get a sequence −
- Related Articles
- How do I change a MongoDB user's password?
- How do I change matplotlib's subplot projection of an existing axis?
- How to access nested JSON property based on another property's value in JavaScript?
- How to change the order of a matrix in increasing order based on a single column?
- Tag names of body element's children in JavaScript?
- How do I wrap text in a <pre> tag in HTML?
- MySQL ORDER BY 'ENUM' type value based on conditions
- Change string based on a condition - JavaScript
- How do I get into a Docker container's shell?
- Retrieving object's entries in order with JavaScript?
- How to change an element's class with JavaScript?
- How do I get a parent HTML Tag with Selenium WebDriver using Java?
- How do I get time of a Python program's execution?
- How do I redraw an image using Python's Matplotlib?
- Sorting numbers based on their digit sums in JavaScript

Advertisements