JQuery动态创建DOM、表单元素的实现代码
更新时间：2011年08月09日 19:13:37 作者：
代码很简单，直接上代码。别忘记引用JQuery包。
复制代码 代码如下:
<!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>
相关文章
CamanJs库用于个人项目中进行使用的图形操作库，这个库是基于JavaScript的canvas操作库，接下来，通过本篇文章给大家详细介绍使用CamanJS在Web页面上处理图像的技巧，需要的朋友一起来学习下2015-08-08
最近在做项目的时候用到了bootstrap，在使用中发现其data与jquery的data有些不一样的地方，记录一下，分享给大家2014-07-07
这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下2016-06-06
怎么设置文章中所有图片width大小批量设置方法？这在实际应用中很常见，下面有一段示例，希望对大家有所帮助2013-08-08
用jQuery.ajaxSetup实现对请求和响应数据的过滤
本文主要对用jQuery.ajaxSetup实现对请求和响应数据的过滤的过程与方法进行详细全面的实例讲解。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了jquery实现鼠标滑过显示提示框的方法,以两个不同实例形式分析了jQuery鼠标滑过显示提示框的实现技巧与功能代码,非常具有实用价值,需要的朋友可以参考下2015-02-02
jquery ajax return没有返回值的解决方法，需要的朋友可以参考下。2011-10-10
这篇文章主要介绍了jQuery的text()方法用法,以实例形式详细分析了jQuery的text()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了jQuery实现滑动开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了jquery+css实现侧边导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论