javascriptjqueryhtmldomdhtml

jQuery: how to change tag name?

jQuery: how to change tag name?

For example:

<tr>
    $1
</tr>

I need

<div>
    $1
</div>

Yes, I can

  1. Create DOM element <div>
  2. Copy tr content to div
  3. Remove tr from dom

But can I make it directly?

PS:

    $(tr).get(0).tagName = "div";

results in DOMException.

Solution

  • You can replace any HTML markup by using jQuery's .replaceWith() method.

    example: http://jsfiddle.net/JHmaV/

    Ref.: .replaceWith

    If you want to keep the existing markup, you could use code like this:

    $('#target').replaceWith('<newTag>' + $('#target').html() +'</newTag>')