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 UI-Draggable 参数集合
Jan 10 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
javascript实现电商放大镜效果
Nov 23 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
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python实现飞机大战微信小游戏
2020/03/21 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
路政管理毕业自荐书范文
2014/02/10 职场文书
公司请假条格式
2014/04/11 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
宣传口号大全
2014/06/16 职场文书
安全生产年活动总结
2014/08/29 职场文书
放飞理想演讲稿
2014/09/09 职场文书
论文答辩开场白大全
2015/05/27 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
python 闭包函数详细介绍
2022/04/19 Python