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

<p>some text <span class='replaceMe'>My Span</span> <b>some</b> more text</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class='replaceMe'>Accusantium vero officiis cumque</span> ucimus nostrum culpa molestiae esse ut! text</p>

<button onclick='fnMakeH2custom()'>make H2 custom</button>

CSS

p {
    margin-bottom: 10px;
}
h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;    
}

JavaScript

function fnMakeH2custom() {
    $('.replaceMe').each(function() {
        
        var $parent = $(this).parent(),
            $h2 = $(this).before('$sep$').wrap('<h2>').parent().insertAfter($parent);
        
        var split = $parent.html().split('$sep$');
        
        $parent.before('<p>' + split[0] + '</p>');
        $h2.after('<p>' + split[1] + '</p>');
        
        $parent.remove();
    })
}