如何使用 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 更改任何元素的名称。为此，我们应用了一种简单的方法，即识别元素、保留其属性，然后用具有相同属性的新元素替换它。

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/