javascript - 为什么<div>块是使用innerHTML包装<p>而弹出的？

我注意到使用innerHTML非常奇怪的行为：

var elem = document.body;
elem.innerHTML = '<p> <div> Inner div </div> </p>';

运行此代码后您希望看到哪些DOM？

喜欢这个吗？

<body>
  <p>
    <div> Inner div </div>
  </p>
</body>

答案不正确！因为您会看到以下DOM：

<body>
  <p></p>
  <div> Inner div </div>
  <p></p>
</body>

在Chrome，Safari，MS Edge，IE11上的效果与此类似（只能在Firefox上使用）。

有没有人知道为什么它在大多数浏览器上都能正常工作？

我知道在div内添加p语义错误，但我可以appendChild或innerHTML p添加elem.innerHTML = '<p><span> It breaks divs <div> at any </div> level </span></p>'元素本身！

P.S。它从任何级别弹出div：

<body>
  <p>
    <span> It breaks divs </span>
  </p>
  <div> at any </div>
  level
  <p></p>
</body>

导致绝对混乱：

product