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 行级解析读取XML文件(附源码)
Oct 12 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
js实现五星评价功能
Mar 08 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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字符串替换函数substr_replace()用法实例
2015/03/17 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php面向对象值单例模式
2016/05/03 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP中16个高危函数整理
2019/09/19 PHP
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
js密码强度校验
2015/11/10 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python完全新手教程
2007/02/08 Python
Python三元运算实现方法
2015/01/12 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
基于python实现文件加密功能
2020/01/06 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
介绍一下你对SOA的认识
2016/04/24 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
专升本个人自我评价
2013/12/22 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
方法汇总:Python 安装第三方库常用
2022/04/26 Python