Jquery replaceWith not working

Question

Using Jquery 1.7.1

I have two divs

<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div> 

Those show up in the page source. But this jquery I added at the bottom of the page is not working:

<script type="text/javascript" id="makeHighlight">
   $(document).ready(function () {
     $("div.highlightStart").replaceWith("<section class='highlight'>");
     $("div.highlightEnd").replaceWith("</section>"); 
   });
</script>

No javascript errors showing in the browser console (Chrome). Just nothing gets replaced.

Answer 1

First i want to site that you're a producing an incorrect structure of DOM. If your script will run it will looks like this:

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

and this is not a good structure if you want have:

<section>
{page content here}
</section>

Should be something like this:

Your DOM:

<div id="content">
{page content here}
</div>

And in your script:

$(document).ready(function () {
  content = $('#content').text();

  $('#content').html($('<section>').text(content));
});

Please see myfiddle for reference