En general, me gusta este estilo de etiqueta y entrada:
<label><input type="checkbox"> Click me!</label>Entonces puedo hacer clic tanto en el cuadro como en la etiqueta. Pero jugué con crear cosas de esta manera:
let lab = document.createElement('label'); let cb = document.createElement('input'); cb.type = "checkbox"; lab.appendChild(cb); Ahí es donde me quedé atascado. Si uso lab.innerText="anything" la casilla de verificación desaparece. Es eso o poner la etiqueta antes o después de la casilla de verificación y luego no puede hacer clic en la etiqueta para cambiar la casilla de verificación. Puedo estar arruinando el HTML. No estoy seguro. Al final, tuve que usar lab.innerHTML para agregar la casilla de verificación. Eso funciona, pero sé que no es correcto. Entonces podría usar lab.querySelector para obtener la casilla de verificación y adjuntar un evento onclick .
Tiene que haber una mejor manera.
¡Y la respuesta es SÍ a mi comentario!
Podemos insertar un nodo de texto antes de insertar la casilla de verificación.
Afortunadamente, hay un atajo para insertar un nodo de texto, que simplemente inserta una cadena con append :
let lab = document.createElement('label'); let cb = document.createElement('input'); cb.type = "checkbox"; lab.append("label here"); lab.appendChild(cb); document.body.appendChild(lab);