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, Oct 05 '09 at 14:24
Note that `
...
` is not valid HTML since block tags are not allowed inside a `
`. — Jan Aagaard, Oct 05 '09 at 14:26

score 3 · Accepted Answer · edited May 23 '17 at 12:07

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 '17 at 12:07

Community

1
1

answered Oct 05 '09 at 14:37

Seb Pollard

366
1
3

You might want to filter out the whitespace-only text nodes: **return (this.nodeType==Node.TEXT_NODE)&&this.wholeText.replace(/[ \t\n]/g,'')** – NVRAM Oct 05 '09 at 15:06

score 0 · Answer 2 · answered Oct 05 '09 at 14:28

0

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

answered Oct 05 '09 at 14:28

Tzury Bar Yochay

8,798
5
49
73

score 0 · Answer 3 · answered Oct 05 '09 at 14:30

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).

Wrapping Text with jQuery

3 Answers3