jQuery .html()方法关闭<p>标签问题？

Question

我通过ajax加载一些html并将其插入DOM.以下是收到的数据的一部分,输出到控制台:

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

如您所见,p标签排列正常.但是,当我使用jQuery的html()方法将数据插入dom时,这就是它实际附加的方式:

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

p标签发生了什么？

Answer 1

javascript解析器执行此操作的原因实际上是因为<p>不允许<div>标记在HTML规范中包含标记.请参考html规范和这个问题(为什么<p>标签里面不能包含<div>标签？).