Jquery html() method not working if we place a div inside a 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 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:
enter image description here

Though HTML inside accordionContentTwoCol is:

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

why that happens?

Because it's invalid and the browser moves the div to the next valid position. — Prinzhorn, Sep 23 '13 at 07:19
http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Prinzhorn, Sep 23 '13 at 07:20

score 5 · Accepted Answer · edited May 23 '17 at 12:13

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?

score 1 · Answer 2 · answered Sep 23 '13 at 07:20

1

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

answered Sep 23 '13 at 07:20

nrsharma

2,532
3
20
36

score 0 · Answer 3 · edited Sep 23 '13 at 07:23

0

Try using

<div style="display: inline">

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

edited Sep 23 '13 at 07:23

Lee Taylor

7,761
16
33
49

answered Sep 23 '13 at 07:23

Gurminder Singh

1,755
16
19

score 0 · Answer 4 · answered Sep 23 '13 at 07:24

0

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

answered Sep 23 '13 at 07:24

Rohan Kumar

40,431
11
76
106

Jquery html() method not working if we place a div inside a p tag?

4 Answers4