How to wrap text inside 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've tried:

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

but it does not work. How can I achieve above result?

see http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — user2153497, Apr 18 '13 at 05:28

Eli · Accepted Answer · 2013-04-18T04:30:08.970

2

You can use jQuery contents() along with slice method:

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

Working Demo

edited Apr 18 '13 at 04:30

answered Apr 17 '13 at 17:47

Eli

14,779
5
59
77

score 2 · Answer 2 · answered Apr 17 '13 at 17:52

2

Another solution using nextSibling:

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

http://jsfiddle.net/4MCen/

answered Apr 17 '13 at 17:52

dfsq

191,768
25
236
258

score 1 · Answer 3 · answered Apr 17 '13 at 17:59

1

Another Solution

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

Working Demo

answered Apr 17 '13 at 17:59

Adil Shaikh

44,509
17
89
111

How to wrap text inside new div?

3 Answers3