Skip to content
Related Articles

Related Articles

Improve Article

How to change an HTML element name using jQuery ?

  • Last Updated : 07 Jul, 2021
Geek Week

Given an HTML document and the task is to replace an HTML element by another element. For example: we can change an element <b> with <h1> element without changing any other property.
Approach: 
 

  • Select the HTML element which need to be change.
  • Copy all attributes of previous element in an object.
  • Replace the previous element by new element.

Example 1: This example illustrates the above approach. 
 

html




<!DOCTYPE HTML> 
<html
 
<head
    <title
        JQuery | Change an element type.
    </title>
     
    <script src=
    </script>
</head
 
<body style = "text-align:center;"
     
    <h1 style = "color:green;"
        GeeksforGeeks 
    </h1>
     
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
  
     
    <button onclick = "GFG_Fun()">
        click here
    </button>
     
    <br><br>
         
    <b style = "color:green; font-weight: bold;">
        Welcome to GeeksforGeeks
    </b>
         
    <script
        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());
            });
        }
    </script
</body
 
</html>

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     



Example 2: This example using the above discussed approach but with a different way to copy attributes. 
 

html




<!DOCTYPE HTML> 
<html
 
<head
    <title
        JQuery | Change an element type.
    </title>
     
    <script src=
    </script>
</head
 
<body id = "body" style = "text-align:center;"
     
    <h1 style = "color:green;"
        GeeksforGeeks 
    </h1>
     
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
  
     
    <button onclick = "GFG_Fun()">
        click here
    </button>
     
    <br><br>
     
    <b style
            "color:green; font-weight: bold;">
        Welcome to GeeksforGeeks
    </b>
     
    <script
        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);
        }
    </script> 
</body
 
</html>

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :