次のHTML/JavaScriptを使用してチェックボックスを動的に作成しようとしています。なぜ機能しないのでしょうか?
<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>
入力要素内にテキストノードを配置しようとしています。
入力要素は空であり、子を持つことはできません。
...
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);
最後の行は次のようになります
cbh.appendChild(document.createTextNode(cap));
チェックボックス自体ではなく、チェックボックスと同じコンテナにテキスト(ラベル?)を追加します
/* worked for me */
<div id="divid"> </div>
<script type="text/javascript">
var hold = document.getElementById("divid");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "chkbox1";
checkbox.id = "cbid";
var label = document.createElement('label');
var tn = document.createTextNode("Not A RoBot");
label.htmlFor="cbid";
label.appendChild(tn);
hold.appendChild(label);
hold.appendChild(checkbox);
</script>
関数を作成できます:
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;
}
そして、あなたは次のような電話をします:
changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);