请问同一个字符串 html，为什么 createElement template 多次生成的 content 不一样呢？

Question

const createDomTree = content => {
  const template = document.createElement('template');
  template.innerHTML = content;

  console.log('template.content: ', template.content);
  console.log('template.children: ', template.content.children);

  const treeNodes = template.content.children || [];
  const treeNodesArr = [].slice.call(treeNodes);
  return treeNodesArr;
};

第一次进来

html字符串: '<p>1</p><p>2</p>'

第二次进来

做了一些处理，在外面包了一层 p，第二次进来理论上content应该是解析出一个 p

html字符串: '<p data-scroll-id="1653587266164" style="margin: 0;"><p>1</p><p>2</p></p>'

模拟测试

使用 div 包裹

html字符串: '<div><p data-scroll-id="1653587266164" style="margin: 0;"><p>1</p><p>2</p></p></div>'

使用 p 包裹

html字符串: '<p><p data-scroll-id="1653587266164" style="margin: 0;"><p>1</p><p>2</p></p></p>'

就算是去掉各种特殊属性也是一样的

搞不懂这是什么情况，求大佬解答~~

Answer 1

因为：
块级中可以包括一部分块级元素，并可以包含内联元素。内联元素中不包含块级元素，只可以包含内联元素。
块级与块级并列，内联与内联元素相并列。
所以：
P 标签虽然是块级元素，但不可包含其他块级元素。
像 P标签 . <h1 ~6> dt标签 这几个块元素只可包含内联元素,
p标签无法嵌套 p div ul 标签

Answer 2

可能是这个原因：p 标签不能包裹 p 标签

<p><p></p></p>

会自动转成

<p></p><p></p>

Answer 3

p 标签只能包含段落式内容，如果包含一个非段落式标签，则 p 会被特殊处理，p 标签本身属于段落标签

// 由于 div 属于非段落式标签，会被浏览器解析成 <p></p><div></div><p></p>
<p><div></div></p>