浏览器何时修正无效HTML？动态创建的HTML为何不被自动修正？

两种场景行为不一致的核心原因 #

二者触发的浏览器处理流程完全不同：

• 初始加载页面时，浏览器会运行HTML解析器，把文本形态的HTML源码转换成DOM树。解析阶段内置了标准的纠错逻辑，遇到无效的标签嵌套、缺失闭合标签等不符合语法规则的内容时，会自动调整节点结构生成合法的DOM树，你看到的修正就是这个阶段的产物。
• 用JavaScript动态创建DOM时，走的是直接操作现有DOM树的流程，没有经过HTML解析器。DOM规范本身是通用的节点树操作标准，不限制元素的嵌套规则，哪怕你把<span>直接作为<tr>的子节点、把<table>插入<p>内部，调用createElement、appendChild这类API时都可以执行成功，浏览器不会主动修正已经生成的DOM结构。

W3C的相关规范约定 #

这个跨浏览器一致的行为完全符合W3C标准：

• HTML规范明确定义了解析器的纠错算法，对各类无效HTML结构的处理逻辑做了统一约定，所有主流浏览器都实现了这套算法，保证初始加载时的纠错行为统一。
• DOM规范仅定义了节点树的操作接口，没有对元素的嵌套合法性做强制校验，允许任意合法节点作为子节点插入，因此JS操作DOM时不会触发自动纠错。

浏览器会触发HTML修正的常见场景 #

只有当内容需要经过HTML解析器处理时，才会触发自动修正，典型场景包括：

• 页面初始加载，解析服务端返回的HTML源码
• 调用innerHTML、outerHTML属性赋值时，传入的字符串会先进入解析流程，无效结构会被修正
• 使用document.write()、document.writeln()写入HTML内容时
• 解析<iframe>、<template>元素内部的HTML内容时

内容的提问来源于stack exchange，提问作者mheim