数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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>
</pre>
当脚本执行时，它将在网页上显示文本和一个点击按钮。如果用户点击按钮，则会激活事件，对文本进行排序，并在网页上显示。
更新于：2023年4月21日
590 次浏览
广告