The jquery html () method does not work if we place the div inside the p tag?

Question

This is my HTML:

<div class="accor"> </div> <div class="accordionContentTwoCol"> <p class="noEdit"> <div> name : </div> </p> <div> 

I need to find the html content of the accordionContentTwoCol div (I only have access to accor ).
If I try to print the html inside the accordionContentTwoCol div as follows:

 alert("html inside accordionContentTwoCol :"+$('.accor').next().html()); 

It prints like this:

Although the HTML is inside accordionContentTwoCol :

 <p class="noEdit"> <div> name : </div> </p> 

Why is this happening?

Answer 1

The authoritative place to look for permitted restraining relationships is the HTML specification. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html . It determines which elements are block elements and which are inline. For these lists, find the section labeled "HTML Content Models."

For an element P, it sets the following, which indicates that the elements of P are allowed to contain only inline elements.

 <!ELEMENT P - O (%inline;)* -- paragraph --> 

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , which states that the P element "cannot contain block level elements (including P itself)."

Why can't the <p> tag contain a <div> inside it?

Answer 2

The markup you are using is incorrect. <div> cannot be nested within a <p> .

Answer 3

Try using

 <div style="display: inline"> 

Otherwise, use <span> instead of <div> .

Answer 4

From HTML 4.01 Section 9.3.1

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