Création de la case à cocher dynamiquement en utilisant JavaScript?

Question

J'essaie de créer une case à cocher dynamiquement en utilisant HTML/JavaScript suivant. Des idées pour lesquelles ça ne marche pas?

<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

Vous essayez de placer un noeud de texte dans un élément d'entrée.

Les éléments d'entrée sont vides et ne peuvent pas avoir d'enfants.

... 
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 dernière ligne devrait

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

Adjonction le texte (? Étiquette) au même conteneur que la case à cocher, et non la case à cocher se

Answer 3

Vous pouvez créer une fonction:

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

Et vous faites un appel comme:

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