防止动态创建的输入元素上的结束标记？

Question

将 </input> 元素附加到列表项后，并在其后附加一个子元素，浏览器会生成一个无效的 </input> 标签。我怎样才能防止这种情况发生？在元素检查器中，创建的元素在那里，但我看不到它们或选择它们的内容。我把整个代码放在这里：https : //codepen.io/elenderg/pen/eYYJxqgvar Matricula = "<strong>PAM5913</strong><br>";var Velocidade = "N0250";var Origem ="SBHT&emsp;";var Destino = "<strong>SBBE</strong><br>";var Hora = "<strong>1600</strong>"var Tipo = "E195M"var Transponder = "6721";var Nível = "F370";var Rota = "DCT";function CriaStrip(){var Ul = document.getElementById('ul');var Li = document.createElement('li');Li.setAttribute("class", "cinza li");var Input = document.createElement('input');Input.setAttribute('name', 'painel');Input.setAttribute("type","radio");Input.setAttribute("id","input1");var Label = document.createElement('label')Label.htmlFor = 'input1';var Div1 = document.createElement('div');Div1.setAttribute("class", "lado-a-lado");Div1.innerHTML = Matricula + Origem + Destino + Hora + Tipo;var Div2 = document.createElement('div');Div2.setAttribute("class", "dados");Div2.innerHTML = Transponder + Nível + Rota + "<br><br>" + Velocidade;Ul.appendChild(Li);Li.appendChild(Input);Input.appendChild(Label);Label.appendChild(Div1);Div1.appendChild(Div2);}.painel{    border: 4px solid rgb(0,0,255) ;    width: 50%;    background-color: black;}.cinza{    background-color: gray;    border-bottom: 1px solid silver;;    }.ul{    margin:0px;    padding: 0px;    list-style: none;  }.li{    border: 1px solid #ccc;    box-sizing: border-box;    position: relative;    height: 70px;}.li label{    bottom: 1px;    left: 1px;    right: 1px;    top: 1px;    display: block;        position: absolute;}input[type="radio"]{  display: none;}.lado-a-lado{    display: -webkit-box;    }.dados{    padding-left: 3px;}.ul input:checked + label {    border-right: 8px solid white;  }<div class="painel" onclick="CriaStrip()">         <ul class="ul" id="ul">            <li class="cinza li" id="li">                      Click to create new items                       </li>        </ul>    </div>

Answer 1

我只需要更改您附加标签的方式。你应该把它附加到 Li 而不是 Input

Ul.appendChild(Li);

Li.appendChild(Input);

Li.appendChild(Label); // From Input to Li

Label.appendChild(Div1);

Div1.appendChild(Div2);