I have been playin with dynamic changes to innerHTML content and have noticed some strange behaviour with tables nested inside other elements.

For example form p /p p table /table /p /form was not seeing the table as innerHTML of the second p but instead listed the table as a sibling of that p tag rather than a child.

I figure this is a well known behaviour.

What is the gap in my knowlegde?

TIA

I have been playin with dynamic changes to innerHTML content and have noticed some strange behaviour with tables nested inside other elements.

For example form p /p p table /table /p /form was not seeing the table as innerHTML of the second p but instead listed the table as a sibling of that p tag rather than a child.

I figure this is a well known behaviour.

What is the gap in my knowlegde?

TIA

• javascript
• html

Share Improve this question Follow edited Sep 18, 2011 at 5:35 mu is too short 435k7171 gold badges859859 silver badges818818 bronze badges asked Sep 18, 2011 at 5:24 Muzza MuzzaMuzza Muzza 4311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can't put a <table> inside a <p>. From the HTML4 specification:

<!ELEMENT P - O (%inline;)* -- paragraph -->
[...]
It cannot contain block-level elements (including P itself).

And then if you look at what the %inline; elements are, you won't find <table> in the list.

And for HTML5, <p> can contain phrasing content:

Permitted contents

Phrasing content

And phrasing content is character data and phrasing elements, phrasing elements are:

a or em or strong or small ... meter

There's no <table> in that list.

So you're trying to insert invalid HTML and the browser is changing <p><table></table></p> into <p></p><table></table> (i.e. moving the table child up to a sibling) in order to get valid HTML.

If you give the browser invalid HTML, the browser will guess what you really mean and go with its guess.

This is because both <p> and <table> are block-level elements.

Use a container element for your table, like a <div>.

Good luck! :)