JavaScript动态生成带文本的复选框及列表布局实现

JavaScript动态生成复选框及文本节点

首先，利用JavaScript动态生成复选框（Checkbox）可采用如下示例代码：

var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",'123456');

然而，上述方式生成的复选框后方不会自动附带文字。若需添加说明文字，必须使用

document.createTextNode('XXX')

方法创建一个文本节点，并将其放置在复选框之后。

如下代码展示了程序如何生成一个复选框和一个文本节点，并将它们共同放入一个li对象中，随后将该li对象添加到ul对象内：

var executerDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul=document.createElement("ul");
for(var i=0;i<tableDatas.length;i++){
 var arr=tableDatas[i];
 // 加入复选框
 var checkBox=document.createElement("input");
 checkBox.setAttribute("type","checkbox");
 checkBox.setAttribute("id",arr[0]);
 checkBox.setAttribute("name", arr[1]);
 var li=document.createElement("li");
 li.appendChild(checkBox); 
 li.appendChild(document.createTextNode(arr[1]));
 ul.appendChild(li); 
 } 
 executerDiv.appendChild(ul);

CSS控制列表排列与样式

上述代码将复选框置于li和ul结构中，从而获得良好的排列效果。UL和li设置的CSS样式如下：

#executerDiv{
    }
#executerDiv ul{
margin:0px;
padding:0px;
list-style-type:none;
vertical-align:middle ;
    }
#executerDiv li{
float:left;
display:block;
width:100px;
height:20px;
line-height:20px;
font-size:14px;
font-weight:bold;
color:#666666;
text-decoration:none;
text-align:left;
background:#ffffff;
    }