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> 个元素没有 "inner 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。 "inner" 文本将不会呈现。

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

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

JavaScript/HTML inconsistent display of checkbox inner HTML

html

javascript

innerhtml