¿Crear la casilla de verificación dinámicamente usando JavaScript?

Question

Intento crear una casilla de verificación dinámicamente utilizando el siguiente código HTML/JavaScript. ¿Alguna idea de por qué no funciona?

<div id="cb"></div> 
<script type="text/javascript"> 
    var cbh = document.getElementById('cb'); 
    var val = '1'; 
    var cap = 'Jan'; 

    var cb = document.createElement('input'); 
    cb.type = 'checkbox'; 
    cbh.appendChild(cb); 
    cb.name = val; 
    cb.value = cap; 
    cb.appendChild(document.createTextNode(cap)); 
</script> 

Answer 1

Está tratando de poner un nodo de texto dentro de un elemento de entrada.

Los elementos de entrada están vacíos y no pueden tener hijos.

... 
var checkbox = document.createElement('input'); 
checkbox.type = "checkbox"; 
checkbox.name = "name"; 
checkbox.value = "value"; 
checkbox.id = "id"; 

var label = document.createElement('label') 
label.htmlFor = "id"; 
label.appendChild(document.createTextNode('text for label after checkbox')); 

container.appendChild(checkbox); 
container.appendChild(label); 

Answer 2

La última línea debe decir

cbh.appendChild(document.createTextNode(cap)); 

Al añadir el texto (? Etiqueta) para el mismo recipiente que la casilla de verificación, no la casilla de verificación en sí

Answer 3

Puede crear una función:

function changeInputType(oldObj, oTyp, nValue) { 
    var newObject = document.createElement('input'); 
    newObject.type = oTyp; 
    if(oldObj.size) newObject.size = oldObj.size; 
    if(oldObj.value) newObject.value = nValue; 
    if(oldObj.name) newObject.name = oldObj.name; 
    if(oldObj.id) newObject.id = oldObj.id; 
    if(oldObj.className) newObject.className = oldObj.className; 
    oldObj.parentNode.replaceChild(newObject,oldObj); 
    return newObject; 
} 

Y usted hace una llamada como:

changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);