JQuery动态创建DOM、表单元素的实现代码 |
本文标签:DOM,表单元素 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>createElement</title> <style type="text/css"> .warpper{ border:1px solid red; padding:8px;} </style> <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script> <script type="text/javascript" language="javascript"> <!-- ///动态创建一个div $(function(){ $(<div />,{ id:test, text:"this is a div", "class":"warpper", click:function(){ var text=$(this).text(); alert(text); } }).appendTo("body"); }); //创建input:text $(function(){ $(<input />,{ type:"text", val:"input text somethings...", name:"userName" }).appendTo("body"); }); //创建input select $(function(){ var slt=$(<select />,{name:"country" }); $(<option />,{ val:"0", text:"请选择" }).appendTo(slt); $(<option>,{ val:"CN", text:"China", selected:"selected" }).appendTo(slt); $("body").append(slt); }); //创建radio $(function(){ $(<input />,{ type:"radio", name:"rdo", checked:"checked", val:"男" }).appendTo("body"); $(<label>,{ text:"男", }).appendTo("body"); $(<input />,{ type:"radio", name:"rdo", val:"女" }).appendTo("body"); $(<label>,{ text:"女" }).appendTo("body"); }); //creat checkbox $(function(){ $(<input />,{ type:"checkbox", name:"cbox", val:"1", checked:"checked" }).appendTo("body"); }); $(function(){ $(<input />,{ type:"file", name:"myfile" }).appendTo("body"); }); //--> </script> </head> <body> <form> </body> </html> |