資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用jQuery更改HTML元素名稱？
jQuery是一個建立的JavaScript庫，用於簡化事件處理、CSS動畫、Ajax以及DOM樹導航和操作。在本文中，我們將學習如何使用jQuery更改元素的名稱。
演算法
我們將遵循一個三步法來使用jQuery更改任何元素的名稱
識別並選擇要更改的元素。
將所選元素的所有屬性複製到一個臨時物件中。
使用新名稱建立一個新元素，並將所有屬性複製到其中。用這個新元素替換舊元素。
示例
讓我們來看一個例子，以便更好地理解。
步驟1：首先，我們將定義HTML檔案。
<!DOCTYPE html>
<html>
<head>
<title>How to change an HTML element name using jQuery?</title>
</head>
<body>
<h4>How to change an HTML element name using jQuery?</h4>
<div>
<button id="main">CLICK!</button>
</div>
</body>
</html>
步驟2：現在，我們將使用CSS為頁面提供一些樣式。
<style>
#main {
border-radius: 10px;
}
</style>
步驟3：現在，我們將jQuery匯入網頁。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
步驟4：現在，我們將新增邏輯，以便在單擊按鈕時執行名稱更改。
<script>
let btn = document.getElementById("main");
btn.onclick = () => {
let attribute = {};
$.each($("h4")[0].attributes, function (id, atr) {
attribute[atr.nodeName] = atr.nodeValue;
});
$("h4").replaceWith(function () {
return $("<h1 />",
attribute).append($(this).contents());
});
}
</script>
</body>
以下是完整的程式碼
<!DOCTYPE html>
<html>
<head>
<title>How to change an HTML element name using jQuery?</title>
<style>
#main {
border-radius: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h4>How to change an HTML element name using jQuery?</h4>
<div>
<button id="main">CLICK!</button>
</div>
<script>
let btn = document.getElementById("main");
btn.onclick = () => {
let attribute = {};
$.each($("h4")[0].attributes, function (id, atr) {
attribute[atr.nodeName] = atr.nodeValue;
});
$("h4").replaceWith(function () {
return $("<h1 />",
attribute).append($(this).contents());
});
}
</script>
</body>
</html>
結論
在本文中，我們學習瞭如何使用jQuery更改任何元素的名稱。為此，我們採用了一種簡單的方法，即識別元素、保留其屬性，然後用具有相同屬性的新元素替換它。
更新於： 2023年9月12日
875 次瀏覽
廣告