jquery利用appendTo动态创建元素

动态创建元素可以说是DOM中常做的事情，下面我来介绍在jquery中利用appendTo来动态创建元素，有需要的朋友可参考参考。

当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

//jQuery内部使用document.createElement创建元素:

1. $("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

复制代码

否则使用innerHTML方法创建元素:

//jQuery内部使用innerHTML创建元素:

1. $("动态创建的div").appendTo(testDiv)

复制代码

看一个动态创建DOM、表单元素实例

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>createElement</title>
6. <style type="text/css">
7. .warpper{ border:1px solid red; padding:8px;}
8. </style>
9. <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
10. <script type="text/javascript" language="javascript">
11. <!--
12. ///动态创建一个div
13. $(function(){
14. $('<div />',{
15. id:'test',
16. text:"this is a div",
17. "class":"warpper",
18. click:function(){
19. var text=$(this).text();
20. alert(text);
21. }
22. }).appendTo("body");
23. });
24. //创建input:text
25. $(function(){
26. $('<input />',{
27. type:"text",
28. val:"input text somethings...",
29. name:"userName"
30. }).appendTo("body");
31. });
32. //创建input select
33. $(function(){
34. var slt=$('<select />',{name:"country" });
35. $('<option />',{
36. val:"0",
37. text:"请选择"
38. }).appendTo(slt);
39. $('<option>',{
40. val:"CN",
41. text:"China",
42. selected:"selected"
43. }).appendTo(slt);
44. $("body").append(slt);
45. });
46. //创建radio
47. $(function(){
48. $('<input />',{
49. type:"radio",
50. name:"rdo",
51. checked:"checked",
52. val:"男"
53. }).appendTo("body");
54. $('<label>',{
55. text:"男",
56. }).appendTo("body");
57. $('<input />',{
58. type:"radio",
59. name:"rdo",
60. val:"女"
61. }).appendTo("body");
62. $('<label>',{
63. text:"女"
64. }).appendTo("body");
65. });
66. //creat checkbox
67. $(function(){
68. $('<input />',{
69. type:"checkbox",
70. name:"cbox",
71. val:"1",
72. checked:"checked"
73. }).appendTo("body");
74. });
75. $(function(){
76. $('<input />',{
77. type:"file",
78. name:"myfile"
79. }).appendTo("body");
80. });
81. //-->
82. </script>
83. </head>
84. </body>
85. </html>

复制代码

如果是js的话我们可以如下 操作

1. var select = document.createElement("select");
2. select.options[0] = new Option("加载项1", "value1");
3. select.options[1] = new Option("加载项2", "value2");
4. select.size = "2";
5. testDiv.appendChild(select);
6. });

复制代码