Replace HR Element with Open Div

Question

So I have been stumped with this for a while now and can't really seem to get around it. I have some content that is added through a wysiwyg editor. What I want to do is use the <hr> element to add divs in there to control the look of the container. The problem is that it adds the closing div. I want to add the closing div to the next hr element.

var firstChild = jQuery('.content-container-wrapper hr:first-child');
var lastChild = jQuery('.content-container-wrapper hr:last-child');
if (firstChild) {
    jQuery(firstChild).replaceWith('<div class="working">');
};

Is there a way to tell the browser not to add the closing div?

Answer 1

It sounds like you want to wrap everything starting with the first HR and ending with last.

Following will wrap everything between the two HR and then remove them( my interpretation of your question).

var $start=jQuery('.content-container-wrapper hr:first-child'),
    $end=jQuery('.content-container-wrapper hr:last-child');

$start.nextUntil( $end).wrapAll( '<div class="working">');
$start.add($end).remove();

You can't insert part of an element and then insert the end the way you do in a text editor

API reference:

http://api.jquery.com/wrapAll/

http://api.jquery.com/nextUntil/