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 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
全面分析JavaScript 继承
May 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
js+audio实现音乐播放器
Sep 13 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实现更新中间关联表数据的两种方法
2014/09/01 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python脚本监控docker容器
2016/04/27 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
安装python及pycharm的教程图解
2019/10/10 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
如何提高MySql的安全性
2014/06/19 面试题
护士自我鉴定范文
2013/10/06 职场文书
中文师范生自荐信
2014/01/30 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
放射科岗位职责
2015/02/14 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers