Change the type of element using jQuery

Question

If I know the ID of an element, is it possible to change the type of HTML tag that it has?

For example if you have <p id="p">Lots and lots of text here.</p>, is it possible to change it to <span id="p">....?

Thanks.

http://stackoverflow.com/questions/918792/use-jquery-to-change-an-html-tag — Vikk, Nov 07 '11 at 14:41
@Vikk - Thanks, I wasn't able to find the answer on here earlier. — David Gard, Nov 07 '11 at 14:57

score 9 · Accepted Answer · answered Nov 07 '11 at 14:42

9

You can use the replaceWith method to do this. You'll need to rebuild the attributes for the replacement though.

$('#p').replaceWith(function(){
   return '<span>' + $(this).contents().text() + '</span>';
});

Working example

answered Nov 07 '11 at 14:42

Jamie Dixon

53,019
19
125
162

score 2 · Answer 2 · answered Nov 07 '11 at 14:44

2

You can do this:

var a = $('#p').text();
$('#p').replaceWith('<span id="#p">' + a + '</span>');

http://jsfiddle.net/teBuN/

answered Nov 07 '11 at 14:44

Jason Gennaro

34,535
8
65
86

score 2 · Answer 3 · answered Nov 07 '11 at 14:47

var el = document.getElementById(id);
var new = document.createElement("span");
new.id = el.id;
[].forEach.call(el.childNodes, function (node) {
  new.appendChild(node);
});
el.parentNode.replaceChild(new, el);

Now, a good question, is why. Why would you want to change the html element?

Surely you choose the most semantic element for this piece of data, why would another element be a better choice?

score 1 · Answer 4 · answered Nov 07 '11 at 14:40

1

$("p").replaceWith(....) .............

answered Nov 07 '11 at 14:40

Royi Namir

144,742
138
468
792

1

I think David is looking for $("#p").replaceWith(...) to replace one particular element in the DOM with the id of "p", versus replacing all paragraph tags with the same new content. – Todd Nov 07 '11 at 14:43
@RoyiNamir - This did get me on the right path though, as I did not know of the existence of `replaceWith()`. Thanks. – David Gard Nov 07 '11 at 14:51
so select the answer who helped you. – Royi Namir Nov 07 '11 at 14:57

Change the type of element using jQuery

4 Answers4