Use jQuery to change an HTML tag

Question

Is this possible   example      a change   click function      code to change p tag to h5 tag        lt p gt Hello  lt  p gt   lt a id  change  gt change lt  a gt    So clicking the change anchor should cause the  lt p gt Hello  lt  p gt  section to change to  as an example  an h5 tag so you d end up with  lt h5 gt Hello  lt  h5 gt  after the click   I realize you can delete the p tag and replace it with an h5  but is there anyway to actually modify an HTML tag

User · Answer

The following function does the trick and keeps all the attributes. You use it for example like this: changeTag("div", "p")

function changeTag(originTag, destTag) {
  while($(originTag).length) {
    $(originTag).replaceWith (function () {
      var attributes = $(this).prop("attributes");
      var $newEl = $(`<${destTag}>`)
      $.each(attributes, function() {
        $newEl.attr(this.name, this.value);
      });  
      return $newEl.html($(this).html())
    })
  }
}

To be sure that it works, check the following example

_x000D_

function changeTag(originTag, destTag) {_x000D_
  while($(originTag).length) {_x000D_
    $(originTag).replaceWith (function () {_x000D_
      var attributes = $(this).prop("attributes");_x000D_
      var $newEl = $(`<${destTag}>`)_x000D_
      $.each(attributes, function() {_x000D_
        $newEl.attr(this.name, this.value);_x000D_
      });  _x000D_
      return $newEl.html($(this).html())_x000D_
    })_x000D_
  }_x000D_
}_x000D_
_x000D_
changeTag("div", "p")_x000D_
_x000D_
console.log($("body").html())

_x000D_

<body>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="A" style="font-size:1em">_x000D_
  <div class="B" style="font-size:1.1em">A</div>_x000D_
</div>_x000D_
<div class="C" style="font-size:1.2em">_x000D_
  B_x000D_
</div>_x000D_
</body>

_x000D_

User · Answer

Rather than change the type of tag  you should be changing the style of the tag  or rather  the tag with a specific id   Its not a good practice to be changing the elements of your document to apply stylistic changes  Try this      a change   click function            p changed   css  font-weight    bold          lt p id  changed  gt Hello  lt  p gt   lt a id  change  gt change lt  a gt

User · Answer

This the quick way to change HTML tags inside your DOM using jQuery  I find this replaceWith   function is very useful      var text     p   text           change   on  click   function          target replaceWith    lt h5 gt   text   lt  h5 gt

User · Answer

This is my solution  It allows to toggle between tags    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D    lt title gt  lt  title gt  x000D   x000D   lt script src  https   code jquery com jquery-1 11 3 js  gt  lt  script gt  x000D   lt script type  text javascript  gt  x000D   x000D  function wrapClass klass   x000D   return  to-    klass  x000D    x000D   x000D  function replaceTag fromTag  toTag   x000D    x000D       Create selector for all elements you want to change  x000D       These should be in form   lt fromTag class  to-toTag  gt  lt  fromTag gt  x000D        x000D   var currentSelector   fromTag         wrapClass toTag   x000D   x000D       Select all elements    x000D   var  selected     currentSelector   x000D   x000D       If you found something then do the magic     x000D   if  selected size    gt  0   x000D   x000D        Replace all selected elements    x000D     selected each function    x000D   x000D         jQuery current element     x000D     var  this     this   x000D   x000D         Remove class  to-toTag   It is no longer needed     x000D      this removeClass wrapClass toTag    x000D   x000D         Create elements that will be places instead of current one     x000D     var  newElem       lt     toTag     gt     x000D   x000D         Copy all attributes from old element to new one     x000D     var attributes    this prop  attributes    x000D       each attributes  function    x000D       newElem attr this name  this value   x000D         x000D   x000D         Add class  to-fromTag  so you can remember it     x000D      newElem addClass wrapClass fromTag    x000D   x000D         Place content of current element to new element     x000D      newElem html  this html     x000D   x000D         Replace old with new     x000D      this replaceWith  newElem   x000D        x000D   x000D        It is possible that current element has desired elements inside  x000D        If so you need to look again for them  x000D         x000D    replaceTag fromTag  toTag   x000D     x000D    x000D   x000D   x000D   lt  script gt  x000D   x000D   lt style type  text css  gt  x000D    x000D   section   x000D    background-color  yellow  x000D     x000D   x000D   div   x000D    background-color  red  x000D     x000D   x000D    big   x000D    font-size  40px  x000D     x000D   x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt button onclick  replaceTag  div    section     gt Section - gt  Div lt  button gt  x000D   lt button onclick  replaceTag  section    div     gt Div - gt  Section lt  button gt  x000D   x000D   lt div class  to-section  gt  x000D    lt p gt Matrix has you  lt  p gt  x000D    lt div class  to-section big  gt  x000D     lt p gt Matrix has you inside  lt  p gt  x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  to-section big  gt  x000D    lt p gt Matrix has me too  lt  p gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Once a dom element is created  the tag is immutable  I believe   You d have to do something like this     this  replaceWith     lt h5 gt     this innerHTML     lt  h5 gt

User · Answer

I came up with an approach where you use a string representation of your jQuery object and replace the tag name using regular expressions and basic JavaScript  You will not loose any content and don t have to loop over each attribute property         replaceTag     return   object  a new object with replaced opening and closing tag     function replaceTag  element  newTagName          Identify opening and closing tag   var oldTagName    element 0  nodeName      elementString    element 0  outerHTML      openingRegex   new RegExp     lt     oldTagName          i        openingTag   elementString match openingRegex       closingRegex   new RegExp    lt       oldTagName     gt       i        closingTag   elementString match closingRegex      if  openingTag  amp  amp  closingTag  amp  amp  newTagName           Remove opening tag     elementString   elementString slice openingTag 0  length          Remove closing tag     elementString   elementString slice 0  - closingTag 0  length           Add new tags     elementString     lt     newTagName         elementString     lt      newTagName     gt           return   elementString       Finally  you can replace the existing object node as follows   var  newElement   replaceTag  rankingSubmit   a        not-an-a-element   replaceWith  newElement

User · Answer

Here s an extension that will do it all  on as many elements in as many ways     Example usage      keep existing class and attributes                 div change   replaceTag   lt span gt    true        or       Discard existing class and attributes               div change   replaceTag   lt span class newclass gt    false        or even     replace all divs with spans  copy classes and attributes  add extra class name              div   replaceTag     lt span gt    addClass  wasDiv    true        Plugin Source     extend       replaceTag  function  currentElem  newTagObj  keepProps            var  currentElem     currentElem           var i   newTag     newTagObj  clone            if  keepProps                     newTag    newTag 0               newTag className   currentElem className                extend newTag classList  currentElem classList                 extend newTag attributes  currentElem attributes                           currentElem wrapAll  newTag            currentElem contents   unwrap               return node   Error spotted by Frank van Luijn          return this     Suggested by ColeLawrence              fn extend       replaceTag  function  newTagObj  keepProps                return  suggested by ColeLawrence         return this each function                 jQuery replaceTag this  newTagObj  keepProps

User · Answer

Idea is to wrap the element  amp  unwrap the contents   function renameElement  element newElement         element wrap   lt   newElement   gt          newElement    element parent           Copying Attributes       each  element prop  attributes    function              newElement attr this name this value                 element contents   unwrap                return  newElement      Sample usage   renameElement    p    h5      Demo

User · Answer

I noticed that the first answer wasn t quite what I needed  so I made a couple of modifications and figured I d post it back here   Improved replaceTag  lt tagName gt       replaceTag  lt tagName gt    withDataAndEvents    withDataAndEvents     Arguments         tagName  String      The tag name e g   div    span   etc       withDataAndEvents  Boolean       A Boolean indicating whether event handlers should be copied along with the elements  As of jQuery 1 4  element data will be copied as well   info      deepWithDataAndEvents  Boolean       A Boolean indicating whether event handlers and data for all children of the cloned element should be copied  By default its value matches the first argument s value  which defaults to false    info         Returns       A newly created jQuery element   Okay  I know there are a few answers here now  but I took it upon myself to write this again   Here we can replace the tag in the same way we use cloning  We are following the same syntax as  clone   with the withDataAndEvents and deepWithDataAndEvents which copy the child nodes  data and events if used   Example    tableRow find  td   each function         this  clone   replaceTag  li   appendTo  ul table-row-as-list          Source     extend       replaceTag  function  element  tagName  withDataAndEvents  deepWithDataAndEvents            var newTag       lt     tagName     gt    0              From  Stackoverflow  Copy all Attributes  http   stackoverflow com a 6753486 2096729            each element attributes  function                 newTag setAttribute this name  this value                         element  children   clone withDataAndEvents  deepWithDataAndEvents  appendTo newTag           return newTag             fn extend       replaceTag  function  tagName  withDataAndEvents  deepWithDataAndEvents               Use map to reconstruct the selector with newly created elements         return this map function                 return jQuery replaceTag this  tagName  withDataAndEvents  deepWithDataAndEvents                            Note that this does not replace the selected element  it returns the newly created one

User · Answer

Is there a specific reason that you need to change the tag   If you just want to make the text bigger  changing the p tag s CSS class would be a better way to go about that   Something like this       change   click function         p   addClass  emphasis

User · Answer

You can achieve by data-  attribute like data-replace  replaceTarget replaceBy  so with help of jQuery to get replaceTarget  amp  replaceBy value by  split   method after getting values then use  replaceWith   method  This data-  attribute technique to easily manage any tag replacement without changing below  common code for all tag replacement    I hope below snippet will help you lot    x000D   x000D    document  on  click     data-replace    function    x000D    var replaceTarget     this  attr  data-replace   split      0   x000D    var replaceBy     this  attr  data-replace   split      1   x000D      replaceTarget  replaceWith   replaceBy  html   replaceTarget  html      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p id  abc  gt Hello World  1 lt  p gt  x000D   lt a href     data-replace   abc  lt h1  gt   gt P change with H1 tag lt  a gt  x000D   lt hr gt  x000D   lt h2 id  xyz  gt Hello World  2 lt  h2 gt  x000D   lt a href     data-replace   xyz  lt p  gt   gt H1 change with P tag lt  a gt  x000D   lt hr gt  x000D   lt b id  bold  gt Hello World  2 lt  b gt  lt br gt  x000D   lt a href     data-replace   bold  lt i  gt   gt B change with I tag lt  a gt  x000D   lt hr gt  x000D   lt i id  italic  gt Hello World  2 lt  i gt  lt br gt  x000D   lt a href     data-replace   italic  lt b  gt   gt I change with B tag lt  a gt  x000D   x000D   x000D

[jquery] Use jQuery to change an HTML tag?

Examples related to jquery