复选框内部 HTML 的 JavaScript/HTML 不一致显示答案

【问题标题】：JavaScript/HTML inconsistent display of checkbox inner HTML复选框内部 HTML 的 JavaScript/HTML 不一致显示
【发布时间】：2017-06-30 11:24:09
【问题描述】：

在 Firefox 54 上，第一个和第三个复选框显示它们的内部文本，而第二个没有，但它们都具有相同的结构，只是使用不同的方法构造。这种行为的原因是什么？

input2 = document.getElementById("input2");
input2.innerHTML = "Check me inner HTML";
input2.innerText = "Check me inner Text";

input3 = document.createRange().createContextualFragment("<input type='checkbox'>Check me fragment</input>");
document.body.appendChild(input3);

<input type="checkbox">Check me HTML</input>
<input type="checkbox" id="input2"></input>

【问题讨论】：

浏览器可以随意处理无效的 HTML，没有规则。 input 是一个空元素，它“必须有开始标签，不能有结束标签”。
<input> 是一个空元素，甚至没有结束标签
HTML <input> 元素是空元素，不能有结束标签。

标签： javascript html innerhtml

【解决方案1】：

<input> 元素没有“内部 HTML”。生成的 HTML 结构是：

<input type="checkbox">Check me HTML
<input type="checkbox" id="input2">Check me inner Text</input>
<script type="text/javascript">/* your js */</script>
<input type="checkbox">Check me fragment

第二个不是有效的 HTML。 “内部”文本不会被渲染。

我不太确定为什么第三个渲染正确。浏览器可能能够在片段包含在页面中之前对其进行修复。
（</input> 可能刚刚被剥离，使 HTML 有效）

【讨论】：