CODEWITHSUNDEEP
jqueryhtml
MLister
MLister

Reputation: 10300

Why does JQuery creates redundant <p></p> elements with this html string?

I've tried it with both append and html in JQuery, but both methods produce a pair of empty <p></p> before and after the <table> element, given this string:

'<p>Blah blah my table below:</p><p><table><thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr></thead><tbody><tr><td>1</td><td>H</td><td>B</td></tr><tr><td>1</td><td>P</td><td>B</td></tr><tr><td>3</td><td>H</td><td>A</td></tr></tbody></table></p>'

You can see this by inspecting elements in the results panel of this fiddle: http://jsfiddle.net/KCrrV/.

Where does these empty <p></p> come from?

Upvotes: 0

Views: 53

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Table can not be inside p tags .

So you get empty p tags at top and bottom

Example

<p> // Browser makes it <p></p>
<table>.....</table>
</p> // Browser makes it <p></p>

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

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Upvotes: 3

Related Questions