为什么在 Chrome 呈现的 HTML 代码中，<div> 标签或 <form> 标签作为 <p> 标签的子标签不是子标签，而是 <p> 标签的同级标签？

问题描述

我的标记（表单标签可以用div标签代替）：

<p data-id="0">
  Please click a button
  <form class="box">
    <button data-target="choco" onclick="drink(event,this)">CHOCO</button>
    <button data-target="milk" onclick="drink(event,this)">MILK</button>
  </form>
</p>

Chrome 呈现的内容，当我检查它时：

<p data-id="0">
  Please click a button
</p>
<form class="box">
  <button data-target="choco" onclick="drink(event,this)">CHOCO</button>
  <button data-target="milk" onclick="drink(event,this)">MILK</button>
</form>
<p></p>

...但是当我使用 Javascript 来解决这个问题时，它可以工作：

let p = document.querySelector('p[data-id]');
p.children;
//evaluates to:  HTMLCollection []
p.nextElementSibling;
//evaluates to: <form class=​"infobox">​…​</form>​
let a = p.nextElementSibling;
p.appendChild(a);
p.children;
//evaluates to: HTMLCollection [form.infobox]

Chrome 现在呈现：

<p data-id="0">
  Please click a button
  <form class="box">
    <button data-target="choco" onclick="drink(event,this)">MILK</button>
  </form>
</p>
<p></p>

当我用 div tag 替换 p tag 时，我没有遇到同样的问题：

<div data-id="0">
  Please click a button
  <form class="box">
    <button data-target="choco" onclick="drink(event,this)">MILK</button>
  </form>
</div>

Chrome 正确呈现上述内容：

<div data-id="0">
  Please click a button
  <form class="box">
    <button data-target="choco" onclick="drink(event,this)">MILK</button>
  </form>
</div>

请问这是怎么回事？ 我使用 Chrome“版本 84.0.4147.89” 我没有在其他浏览器上测试过。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）