如何使用 jQuery 更改 HTML 元素名称？

给定一个 HTML 文档，任务是用另一个元素替换一个 HTML 元素。例如：我们可以用

元素更改元素 而不更改任何其他属性。
方法：

• 选择需要更改的 HTML 元素。
• 复制对象中前一个元素的所有属性。
• 用新元素替换之前的元素。

示例 1：此示例说明了上述方法。

html

 
 
 
 
     
        JQuery | Change an element type.
    
     
    
    
 
 
 
     
     
        GeeksforGeeks 
    
     
    
    
  
     
    
        click here
    
     
    
         
    
        Welcome to GeeksforGeeks
    
         
     
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on the button to "
                    + "replace an HTML element";
         
        function GFG_Fun() {
             
            var attribute = { };
             
            $.each($("b")[0].attributes, function(id, atr) {
                attribute[atr.nodeName] = atr.nodeValue;
            });
            $("b").replaceWith(function () {
                return $("<h1 />",
                    attribute).append($(this).contents());
            });
        }
     
 
 

输出：

• 在点击按钮之前：
  

• 点击按钮后：
  

示例 2：此示例使用上述方法，但使用不同的方式复制属性。

html

 
 
 
 
     
        JQuery | Change an element type.
    
     
    
    
 
 
 
     
     
        GeeksforGeeks 
    
     
    
    
  
     
    
        click here
    
     
    
     
    
        Welcome to GeeksforGeeks
    
     
     
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on the button to "
                    + "replace an HTML element";
         
        function GFG_Fun() {
            var oldElement = $("b");
            var newElement = $("<h1>");
             
            for(var i=0; i<oldElement[0].attributes.length; i++) {
                var Attr = oldElement[0].attributes[i].nodeName;
                var AttrVal = oldElement[0].attributes[i].nodeValue;
                newElement.attr(Attr, AttrVal);
            }
            newElement.html(oldElement.html());
            oldElement.replaceWith(newElement);
        }
     
 
 

输出：

• 在点击按钮之前：
  

• 点击按钮后：