JavaScript/HTML inkonsistente Anzeige des Kontrollkästchens innerer HTML

Question

Auf Firefox 54 zeigen die erste und die dritte Checkbox ihren inneren Text, während die zweite nicht, aber alle haben die gleiche Struktur, nur mit verschiedenen Methoden konstruiert. Was ist der Grund für dieses Verhalten?

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> Elemente haben keine "innere HTML". Die resultierende HTML-Struktur ist:

<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 

Die zweite ist nicht gültig HTML. Der "innere" Text wird nicht gerendert.

Ich bin mir nicht ganz sicher, warum die dritte richtig rendert. Der Browser kann das Fragment möglicherweise reparieren, bevor es in der Seite enthalten ist.
(Die </input> kann nur entfernt werden, so dass der HTML-Code gültig ist)