Wrapping Text with jQuery

Question

I there a way to wrap text inside this div into <p></p>?

<div class="remove">
<h2 class="MsgHead">Messages</h2>
<img height="16" width="16" src="img.jpg"/>
Error saving details
<img height="16" width="16" src="img.jpg" alt="information"/>
Please check your entries  and try again
</div>

I meant those sentences that are outside any tags (inside remove)

Please clarify. Could you provide "before" and "after" examples? — Matt Ball
– Matt Ball, Commented Oct 5, 2009 at 14:24
Note that <p><div>...</div></p> is not valid HTML since block tags are not allowed inside a <p>. — Jan Aagaard
– Jan Aagaard, Commented Oct 5, 2009 at 14:26

Community · Accepted Answer · 2017-05-23 12:07:04Z

3

Assuming you are hoping to end up with

<div class="remove">
  <h2 class="MsgHead">Messages</h2>
  <img height="16" width="16" src="img.jpg"/>
  <p>Error saving details</p>
  <img height="16" width="16" src="img.jpg" alt="information"/>
  <p>Please check your entries  and try again</p>
</div>

and borrowing some code from How do I select text nodes with jQuery?

I came up with this. (which I haven't tested, but, even if it doesn't work, hopefully you get the general idea.)

$('div.remove')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).wrap('<p/>');

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Oct 5, 2009 at 14:37

Seb Pollard

3661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NVRAM Over a year ago

You might want to filter out the whitespace-only text nodes: return (this.nodeType==Node.TEXT_NODE)&&this.wholeText.replace(/[ \t\n]/g,'')

Tzury Bar Yochay · Accepted Answer · 2009-10-05 14:28:29Z

0

$('<p></p>').html($('div.remove').html())

answered Oct 5, 2009 at 14:28

Tzury Bar Yochay

9,0126 gold badges53 silver badges75 bronze badges

Comments

Steerpike · Accepted Answer · 2009-10-05 14:30:16Z

0

Not really with the markup you have currently, I mean theoretically you can, but the markup you seem to want to wrap consists of header elements and you can't place block elements (which header is) inside paragraph elements. (I assumed you wanted the <p> tag inside the <div>, if you actually want to wrap the <div> itself in <p> then that will actually throw an error in IE).

answered Oct 5, 2009 at 14:30

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

Collectives™ on Stack Overflow

Wrapping Text with jQuery

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related