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

Question

在 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>

Answer 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有效(