資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告