jQuery .html() method closing <p> tag issue? [duplicate]

Question

I'm loading in some html via ajax and inserting it into the DOM. Here is the part of the recieved data, outputted into the console:

<div class="devices">
    <h3> Devices </h3>
    <p> 
        <div class="device-icon android-icon"></div>
        <div class="device-icon iphone-icon"></div>
        <div class="device-icon blackberry-icon"></div>
    </p>
</div>

As you can see, the p tags are arranged fine. However, when I insert the data into the dom with jQuery's html() method, this is how it's actually appended:

<div class="devices">
    <h3> Devices </h3>
    <p></p>
        <div class="device-icon android-icon"></div>
        <div class="device-icon iphone-icon"></div>
        <div class="device-icon blackberry-icon"></div>
    <p></p>
</div>

What's going on with the p tags?

Answer 1

The reason why the javascript parser is doing this is actually because <p> tags are not allowed to include <div> tags within the HTML spec. Please refer to the html specification and this question (Why <p> tag can't contain <div> tag inside it?).