How to wrap text inside a new div?

Question

My HTML:

<div class="mainDiv"> <p>This is a paragraph</p> <div class="innerDiv">This is a div</div> This is what I want to wrap </div> 

What I want:

 <div class="mainDiv"> <p>This is a paragraph</p> <div class="innerDiv">This is a div</div> <div class="wrapper"> This is what I want to wrap </div> </div> 

I tried:

 $('.mainDiv').find(".innerDiv").next().wrap('<div class="wrapper" />') 

But that does not work. How can I achieve the above result?

Answer 1

You can use jQuery contents () along with slice :

 $('.mainDiv').contents().slice(-1).wrap('<div class="wrapper"/>'); 

Working demo

Answer 2

Another solution using nextSibling :

 $($('.mainDiv .innerDiv')[0].nextSibling).wrap('<div class="wrapper">'); 

http://jsfiddle.net/4MCen/

Answer 3

Another solution

 $('.mainDiv').contents().last().wrap('<div class="wrapper"/>'); 

Working demo