replaceWith Automatically Closes the Tag

Question

I have 3 divs and I want to replace the first div with an opening tag of another div and the third with the closing tag. This is what I meant:

<div>1</div>
<div>2</div>
<div>3</div>

When I tried to replace (using replaceWith()) the first div with <div class="foo"> and the third with </div>, jQuery somewhat misinterpret it as:

<div class="foo"></div>
<div>2</div>
</div>

While what I actually want is:

<div class="foo">
 <div>2</div>
</div>

Thank you in advance,

Answer 1

You should work with whole elements rather than pieces of HTML code. Another way to think about it is:

// Get the div you want
var good = $('div:eq(1)');
// Remove the others
$('div').not(good).remove();
// Wrap the div you want
good.wrap('<div class="foo">');

If there are multiple divs between the first and the last, you may do this:

$('div:first').replaceWith('<div class="foo">');
$('div.foo').nextAll('div').appendTo('div.foo');
$('div.foo :last').remove();

See demo: http://jsfiddle.net/TBMHt/