Question

Here is my html code:

<div id="notes">
<table class="noborder">
   <tr><th class="noborder"><span>notes</span></th></tr>
   <tr><td>
       <p id="notes_p">

       <p>#1: dhhhhhhfdfffg
       </p>

       <p>　qqqqqqqqqqwwwwwwww wweeeeeeeeerr rrrrrrrtt tttttttt　　
       </p>

       <p>#2: asldkflaksdjflks, lasjdlfjsaldfjasldjfoajsdkfjaslkdjlkfasjdfwoidjfalk,zmncv,mznoqeworjoiejflaksdlfjwaf</p>
       </p>
    </td></tr>
 </table>
 </div>

What I want to do is get the text of each paragraph in the #notes_p. I have tried using…$("#notes_p").html() but I’m only getting a blank. The same with .text(). Why is that happening?

How can I get the innerHtml properly? because I want to use .wrap() in the paragraph and then also the text inside.

Answer 1

Paragraphs don’t nest so the browser will fix your HTML by unwrapping the nesting.

From the HTML4 specification:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

And from HTML5:

Content model:
Phrasing content.

And phrasing content is plain character data and phrasing elements:

a or em or strong …

Note that <p> is not a phrasing element.

The browser will (probably) end up with this structure in the DOM:

<p id="notes_p"></p>
<p>#1: dhhhhhhfdfffg</p>
<p>　qqqqqqqqqqwwwwwwww wweeeeeeeeerr rrrrrrrtt tttttttt</p>
<p>#2: asldkflaksdjflks, lasjdlfjsaldfjasldjfoajsdkfjaslkdjlkfasjdfwoidjfalk,zmncv,mznoqeworjoiejflaksdlfjwaf</p> 

and the result is that #notes_p will be empty and $('#notes_p').html() does nothing useful. You can verify this by checking your page’s structure with your favorite DOM inspector.

Try replacing <p id="notes_p"> with a <div id="notes_p">, then things will start making sense.