如果我们在一个p标签内放置一个div，Jquery html（）方法不起作用？

Question

This is my HTML:

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

I need to find html content of accordionContentTwoCol div (i have access only to accor ).
If i try to print html inside accordionContentTwoCol div like this:

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

It gives output like this:

Though HTML inside accordionContentTwoCol is:

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

why that happens?

Answer 1

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html . It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain 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 says that the P element "cannot contain block-level elements (including P itself)."

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

Answer 2

The markup you use is wrong. The <div> cannot be nested with <p> Tag.

Answer 3

Try using

<div style="display: inline">

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

Answer 4

From the HTML 4.01 specification section 9.3.1

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