JQuery动态创建DOM、表单元素的实现代码


Posted in Javascript onAugust 09, 2011
<!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>
Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript中string对象
Jun 12 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 #Javascript
js 分页全选或反选标识实现代码
Aug 09 #Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 #Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 #Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 #Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 #Javascript
You might like
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP防盗链代码实例
2014/08/27 PHP
重新认识php array_merge函数
2014/08/31 PHP
php session 写入数据库
2016/02/13 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
vuejs指令详解
2017/02/07 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
考试诚信承诺书
2014/05/23 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年防汛工作总结
2015/05/15 职场文书
趣味运动会口号
2015/12/24 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis