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

javascriptweb developmentfront end technologyobject oriented programming更新于 2024/4/28 3:56:17

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

在 JavaScript 中，可以使用 document.querySelectorAll() 根据标签的顺序更改其内部 HTML。让我们进入文章，了解有关根据标签顺序更改标签内部 HTML 的更多信息。

使用 document.querySelectorAll()

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

语法

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

querySelectorAll(selectors)

让我们查看以下示例，以了解有关根据标签顺序更改标签内部 HTML 的更多信息。

示例

在下面的示例中，我们使用 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 中如何根据标签的顺序更改其内部 HTML。

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

当脚本执行时，它将在网页上显示文本以及点击按钮。如果用户点击该按钮，则事件将被激活，对文本进行排序，并将其显示在网页上。