JQuery动态创建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>