极客教程如何根据标签在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>
当脚本被执行时，它将在网页上显示一个文本及一个单击按钮。如果用户单击按钮，事件将被激活，对文本进行排序，并在网页上显示它。