Creazione della casella di controllo in modo dinamico utilizzando JavaScript?

Question

Sto provando a creare una casella di controllo in modo dinamico utilizzando il seguente codice HTML/JavaScript. Qualche idea sul perché non funziona?

<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

Si sta provando a inserire un nodo di testo all'interno di un elemento di input.

Gli elementi di input sono vuoti e non possono avere figli.

... 
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

L'ultima riga dovrebbe

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

Aggiungendo il testo (? Label) per lo stesso contenitore come la casella di controllo, non è la casella di controllo per sé

Answer 3

È possibile creare una funzione:

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; 
} 

E si chiama come:

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