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.

Seriously? That 'seems okay'? I can't help but feel that there's a fundamental misunderstanding between element-nodes and strings. — David Thomas, Oct 21 '13 at 23:29
Are you able to start with a div around the page content that's a sibling of the other two? That would make life simple. — isherwood, Oct 21 '13 at 23:32

Drixson Oseña · Answer 1 · 2013-10-22T00:03:41.720

3

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

edited Oct 22 '13 at 00:03

answered Oct 21 '13 at 23:40

Drixson Oseña

3,631
3
23
36

My understanding is that what you are describing would be for html() not for replaceWith(); html() replaces the content between tags; replaceWith replaces elements. Here is the StackOverflow post I got this from: http://stackoverflow.com/questions/730916/whats-the-difference-between-jquerys-replacewith-and-html – Conando Oct 22 '13 at 04:17

isherwood · Answer 2 · 2013-10-21T23:40:28.913

1

The replaceWith method expects entire elements, not tags. You'll need to wrap your page contents with a new element, then remove the two original divs.

Update: This might get you close:

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

http://jsfiddle.net/isherwood/H36UE

Something's off a bit with this, but I'm out of time. Good luck.

edited Oct 21 '13 at 23:40

answered Oct 21 '13 at 23:30

isherwood

58,414
16
114
157

Thanks for that Isherwood! In the JQuery documentation, is says that replaceWith can accept an HTML String (as well as an element, array or jquery). What I'm using seems to meet the definition of an HTML String: http://api.jquery.com/Types/#htmlString. – Conando Oct 22 '13 at 04:26
The issue seems to be that JQuery will autocomplete a tag into an element so you can not separately insert a start and end tag (it seems to ignore the end tag.) However, this works to just insert text as expected: http://jsfiddle.net/rqrxv/ – Conando Oct 22 '13 at 20:53
This is what I ended up using, closely following your example. The sample HTML shows more the structure of the tree in the client's site: http://jsfiddle.net/H36UE/1/. Thanks a lot for the help! – Conando Oct 24 '13 at 17:08

score 1 · Accepted Answer · answered Oct 24 '13 at 17:12

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();
});

Jquery replaceWith not working

3 Answers3

Linked