properly replace tag by heading tag

Replace some tag-inside-a-paragraph-tag by a heading-tag-enclosed-by-a-paragraph tag. This would result in proper W3C coding, but it seems that jQuery is not able to manipulate the DOM in the right way.

HTML

<body>

<p id='myP'>some text <span id='replaceMe'>My Span</span> some more text</p>
<br />
<span onclick='fnMakeCode()' class='CK'>make code</span>
<br />
<span onclick='fnMakeH2pure()' class='CK'>make H2 pure</span>
<br />
<span onclick='fnMakeH2custom()' class='CK'>make H2 custom</span>

</body>

CSS

span.CK {cursor:pointer;text-decoration:underline;}
h2 {font-size:18px;font-weight:bold;}

JavaScript

function fnMakeCode() {
	$('#myP #replaceMe').replaceWith("<code id='replaceMe'>My Code</code>");
}
function fnMakeH2pure() {
	$('#myP #replaceMe').replaceWith("<h2 id='replaceMe'>My H2 pure</h2>");
}
function fnMakeH2custom() {
  $('#replaceMe').html("<p></p>").html("<h2>My H2 custom</h2>");
	
}