Question

7

Jquery replaceWith not working

rated 0 times [ 8] [ 1] / answers: 1 / hits: 23262 / 11 Years ago, mon, october 21, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsleyashlynnh

Add To Favorites

Follow

Total Points: 64

Total Questions: 119

Total Answers: 98

Location: Burundi

Member since Sat, Aug 21, 2021

3 Years ago

answered 11 Years ago mckaylab · Accepted Answer

Based on help from isherwood, used this as the solution:

http://jsfiddle.net/H36UE/1/

With HTML tree like this:

<div><div><div class=highlightStart>highlightStart</div></div></div>

<div>Outside<div>Content to Highlight</div>More</div>

<div>second</div>

<div>third</div>

<div><div><div class=highlightEnd>highlightEnd</div></div></div>

This Javascript:

$(document).ready(function () {

  $('.highlightStart').parent().parent().replaceWith(<div class='highlightStart'>);

  $('.highlightEnd').parent().parent().replaceWith(<div class='highlightEnd'>);

  $('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll(<section class='highlight'>);



 $('.highlightStart, .highlightEnd').remove();

});