Jquery - How do I change the parent of an element from an H1 to a P?

Question

Jquery - How do I change the parent of an element from an H1 to a P?

I have <h1>heading</h1>, how do I change it to <p>heading</p>

I think I could $.unwrap then $.wrap, but is there a better way?

Answer 1

This question is pretty close (I would consider it a duplicate) of http://stackoverflow.com/questions/240467/how-do-i-change-an-element-e-g-h1-h2-using-jquery-plain-old-javascript

Using this solution, your answer would resemble

var p = $('h4');
var a = $('<p/>').
    append(p.contents());
p.replaceWith(a);

Test it here: http://jsbin.com/abaja/edit

Answer 2

I would create a new element with the contents of the H1, then hide the H1.

var contents = $('h1').html();
$('h1').after('<p>'+content+'<p>');
$('h1').hide();

Answer 3

HTML:

<h1 id="a">heading</h1>

jQuery:

var $a = $('#a');
var contents = $a.contents();
$a.remove();
$('body').append('<p>' + contents + '</p>');

$.unwrap would remove the parent of the matched element. In other words, if #a were the child of a div, the div would be removed and not the h1.

Answer 4

$('h1').wrapInner('<p/>').children().unwrap();