Js dynamic addition check box Checkbox

1. Var checkBox = document. createElement ("input ");
2. CheckBox. setAttribute ("type", "checkbox ");
3. CheckBox. setAttribute ("id", '20140901 ');

However, the generated checkbox does not contain text after the end. If you need to add it, you need to use

1. Document. createTextNode ('xxx ')

Method to generate a text node, which is placed behind the checkbox.

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

1. Var executerDiv = $ ("executerDiv ");
2. ExecuterDiv. innerHTML = "";
3. Var ul = document. createElement ("ul ");
5. For (var I = 0; I <tableDatas. length; I ++ ){
6. Var arr = tableDatas [I];
8. // Add the check box
9. Var checkBox = document. createElement ("input ");
10. CheckBox. setAttribute ("type", "checkbox ");
11. CheckBox. setAttribute ("id", arr [0]);
12. CheckBox. setAttribute ("name", arr [1]);
14. Var li = document. createElement ("li ");
15. Li. appendChild (checkBox );
16. Li. appendChild (document. createTextNode (arr [1]);
18. Ul. appendChild (li );
19. }
21. ExecuterDiv. appendChild (ul );
22. // By [url = http://www.jbxue.com] http://www.jbxue.com [/url]

In the above Code, put the checkbox in li and ul, which can achieve a good arrangement. The CSS style set by UL and li is as follows:

1. # ExecuterDiv {
2. }
4. # ExecuterDiv ul {
5. Margin: 0px;
6. Padding: 0px;
7. List-style-type: none;
8. Vertical-align: middle;
9. }
11. # ExecuterDiv li {
12. Float: left;
13. Display: block;
15. Width: 100px;
16. Height: 20px;
17. Line-height: 20px;
19. Font-size: 14px;
20. Font-weight: bold;
21. Color: #666666;
23. Text-decoration: none;
24. Text-align: left;
26. Background: # ffffff;
27. }