Js dynamically add checkbox Checkbox instance method_javascript skills

First of all, using JS to dynamically generate a Checkbox can use statements similar to the following:

Copy the code The code is as follows:

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

However, the checkbox generated in this way does not have the trailing text. If you need to add it, you need to use the
document.createTextNode('XXX')
method to generate a text node. , placed behind the checkbox.

The following code, the program generates a checkbox and a text node, puts them into a li object, and then adds the li object to the ul object:

Copy code The code is as follows:

var executerDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul= document.createElement("ul");

for(var i=0;i var arr=tableDatas[i];

// Add checkbox
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);


In the above code, put the checkbox in li and ul, which can achieve a good arrangement effect. The CSS styles set by UL and li are as follows:

Copy code

The code is as follows: #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;
}