javascript - Table Tag Not Nesting Inside P Tags In DOM

Question

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

Answer 1

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.