复制代码 代码如下: <!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>
推荐阅读
20个非常棒的 jQuery 幻灯片插件和教程分享
滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法。今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程。 >
Slider Gallery with jQuery
Create a>>>详细阅读
本文标题:JQuery动态创建DOM、表单元素的实现代码
地址:http://www.17bianji.com/kaifa2/JS/24293.html
1/2 1