提问人：codetuner 提问时间：11/9/2023 更新时间：11/10/2023 访问量：47
设置 innerHTML 会吃掉内部表单元素。从什么时候开始，通过什么浏览器？
Setting innerHTML eats inner form element. Since when and by what browsers?
问：
如果以下代码按我的预期运行，按下按钮会将 FORM 的内部 P 元素替换为另一个 FORM，并且会出现嵌套边框：
<form id="aa1" style="border: solid 2px blue; padding: 4px;">
<p>Original content</p>
</form>
<button type="button"
onclick="document.getElementById('aa1').innerHTML = '<form id=\'aa2\' style=\'border: solid 8px red; padding: 4px;\'><p>New content</p></form>';">
Click me
</button>
在 Chrome 119 和 Edge 118（在 Windows 上）中，情况并非如此：内部表单被剥离，原始段落被内部表单的内容替换。
我知道，HTML 中不允许嵌套表单。
我的问题是：所有浏览器的行为都是这样的吗？这种行为在某处描述过吗？从什么版本开始，浏览器的行为是这样的？
在 Fiddle 上试试：https://jsfiddle.net/rnk9vms5/3/
答：
3赞
Marco Bonelli
11/10/2023
#1
现代浏览器非常宽松，接受无效的 HTML，无论如何都试图呈现它，并假设程序员可能想要什么。这并不意味着您应该依赖此类行为或故意编写无效的 HTML。
所有浏览器的行为都是这样的吗？
是的，现在都是。
这种行为在某处描述过吗？从什么版本开始，浏览器的行为是这样的？
没有。它是特定于实现的，并且会因浏览器而异，也可能因同一浏览器的版本而异。你不应该依赖它。
例如，包含以下无效 HTML 代码的网页：
<a>Hello
将被大多数现代浏览器转换为：
<html>
<head></head>
<body>
<a>Hello</a>
</body>
</html>
评论
0赞
codetuner
11/10/2023
“那为什么要尝试创建无效的 HTML 呢？” > 您应该记住，在我的问题中，我表达了一种特定的情况，但我的代码可能更通用。我不是要嵌套HTML表单。我正在尝试替换innerHTML。这是通用功能，我无法控制谁将使用它做什么......
0赞
Marco Bonelli
11/10/2023
@codetuner更新了我的答案
0赞
codetuner
11/10/2023
感谢您的更新。我现在投了赞成票，因为它现在回答了我的问题。但是请注意，不关闭 P 标签并不是在所有 HTML 版本上都无效的：它不在原始 HTML 规范中（参见 shorturl.at/EHLRV 上的注释 1i），并且似乎仍然不是绝对需要的（参见 shorturl.at/uAJVW 中的标签省略）。其余的，你是对的，浏览器很宽松。这里的区别在于，浏览器不仅在渲染嵌套表单方面很宽松，而且可以有效地操纵注入的 HTML 以删除其中的某些部分。感谢您的回答和您的时间！
1赞
Marco Bonelli
11/10/2023
@codetuner “这里的区别在于，浏览器不仅在呈现嵌套表单方面很宽松，而且可以有效地操纵注入的 HTML 以删除其中的一部分。” - 是的，没错！有时，这也可能以非常令人惊讶的方式发生。例如，在安全方面，攻击者故意注入格式错误的 HTML 以绕过 XSS 过滤器，然后浏览器试图“修复”某些东西。这很有趣。例如，请参阅此页面。P.S. 编辑为 .<p><a>
评论
<form>