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.
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