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.

Updated on: 21-Apr-2023

526 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements