Estoy creando dinámicamente un elemento "div" y una casilla de verificación. Si mi código no contiene la div.innerHTML += '<br>' (o cualquier otra línea) como se muestra a continuación, la lógica que establece la casilla de verificación en verdadero funciona correctamente. Sin embargo, si incluyo dicha línea, la casilla de verificación no se establece en verdadero, incluso si los datos son verdaderos. ¿Por qué tener esta línea adicional crearía problemas?
div = document.createElement('div') var checkbox = document.createElement('input') checkbox.type = 'checkbox' if (data === true) { checkbox.checked = true } else { checkbox.checked = false } div.appendChild(checkbox) div.innerHTML += '<br>' // Line creating issues divArea.appendChild(div)Cuando asigna: checkbox.checked = true , define la propiedad (estado de la casilla de verificación, marque esta respuesta ).
Cuando usa div.innerHTML , recrea ( reemplaza ) todo el HTML dentro de div más el que está agregando. Cuando se vuelve a crear HTML, pierde el estado checked .
Lo mejor aquí es establecer el attribute o agregar br mediante insertAdjacentHTML() o createElement .
//via setAttribute() var data = true; var divArea = document.getElementById("divArea"); var div = document.createElement('div'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; if (data === true) { checkbox.setAttribute('checked', 'checked'); } div.appendChild(checkbox); div.innerHTML += '<br>'; // Line creating issues divArea.appendChild(div); <div id="divArea"></div> //via insertAdjacentHTML var data = true; var divArea = document.getElementById('divArea'); var div = document.createElement('div'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; if (data === true) { checkbox.checked = true; } else { checkbox.checked = false; } div.appendChild(checkbox); div.insertAdjacentHTML('beforeend', '<br>'); // Line creating issues divArea.appendChild(div); <div id="divArea"></div> //via creatElement var data = true; var divArea = document.getElementById('divArea'); var div = document.createElement('div'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; if (data === true) { checkbox.checked = true; } else { checkbox.checked = false; } div.appendChild(checkbox); div.appendChild(document.createElement('br')); // Line creating issues divArea.appendChild(div); <div id="divArea"></div> Diferencia entre innerHTML e insertAdjacentHTML
Tiene una referencia a una casilla de verificación que existe en su elemento div. Cuando configura div.innerHTML += '<br>' , sobrescribe la casilla de verificación en su elemento div con una nueva casilla de verificación y una etiqueta br. Su expresión significa convertir el contenido de mi elemento en una cadena html, agregar <br> al final, olvidarse de su contenido anterior y crear contenido nuevo a partir de la nueva cadena.
Agregar al div funcionará, vea el fragmento.
divArea = document.getElementById("div-area") data = true div = document.createElement('div') var checkbox = document.createElement('input') checkbox.type = 'checkbox' if (data === true) { checkbox.checked = true } else { checkbox.checked = false } div.appendChild(checkbox) div.appendChild(document.createElement('br')) divArea.appendChild(div) <div id="div-area">