正在重置 outerHTML document.body的属性(property)有一个奇怪的副作用:它增加了额外的空 <head></head>进入 DOM，就在 body 之前:
head { display: inline; counter-increment: h; border: 1px solid; }
head:last-of-type::after { content: 'Head elements count: ' counter(h); }
[onclick]::after { content: attr(onclick); }<button onclick="document.body.outerHTML=document.body.outerHTML"></button>所有的浏览器在这方面似乎都是一致的。我有 been told它被指定为这种方式，但无法挖掘出关于此的权威标准立场，甚至在讨论文件中也没有提及。您知道这方面的一些背景吗，或者是否有一些技术原因必须这样？有什么想法吗？
最佳答案
有趣的问题。不幸的是，解释隐藏在 HTML fragment parsing algorithm 的细节中。这是从 outerHTML 的定义中引用的在 DOM 解析规范中。
您需要非常仔细地跟踪解析器状态以了解原因，但本质上它是这样工作的。使用 outerHTML，解析器被初始化，就好像它刚刚解析了给定节点父节点的开始标记一样。对于 document.body，这是 html 元素。
在 HTML 解析算法中，当一个 html 开始标记被解析时，解析器接下来期望的是一个 head 元素。但是因为在 HTML 中，head 元素的开始和结束标记是可选的，如果它没有看到接下来的 head 开始标记，它会推断出一个。所以对于 document.body.outerHTML，解析器接下来看到的是 body 开始标记，因此首先创建一个空的 head 元素。
最后，一旦片段被解析，整个部分，包括推断的 head 元素被添加到 DOM。
关于javascript - 设置 document.body.outerHTML 会创建空头。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52888347/