如何根据标签在JavaScript中的顺序更改标签的内部HTML

在JavaScript中，一个元素的innerHTML属性允许你访问和修改其中的任何HTML或XML标记。使用方法insertAdjacentHTML()来插入HTML页面，而不是更改元素的内容。

在JavaScript中，可以使用document.querySelectorAll()来根据标签的顺序更改标签的innerHTML。我们快速学习一下如何根据标签的顺序更改标签的innerHTML。

使用document.querySelectorAll()

由Document函数querySelectorAll()返回的静态NodeList列出了与给定选择器匹配的文档所有元素。

语法

以下是document.querySelectorAll()的语法：

querySelectorAll(selectors)

让我们看下面的例子，了解更多关于根据标签的顺序更改标签的innerHTML的知识。

示例

在以下的例子中，我们使用了addEventListener和匿名函数以及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>

当脚本被执行时，它将生成一个由文本组成的输出以及一个网页上的按钮。如果用户点击按钮，事件将被触发并对文本进行排序。

示例

考虑下面的例子，这里我们对段落元素进行编号，并运行一个循环。

<!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>

运行上面的脚本，输出窗口将弹出，显示名称以及一个单击按钮。当用户单击按钮时，事件将被触发，数字将分配给段落元素。

示例

执行以下代码以观察JavaScript中如何根据标签的顺序更改标签的innerHTML：

<!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>