How to change an HTML element name using jQuery ? - GeeksforGeeks

07 Jul, 2021
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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:  
 
saurabh1990aror
jQuery-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?