提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery代码 实现 元素 表单 dom 动态创建
2023-06-13 09:14:29 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>createElement</title>
<styletype="text/css">
.warpper{border:1pxsolidred;padding:8px;}
</style>
<scripttype="text/javascript"language="javascript"src="JavaScript/jquery-1.6.1.min.js"></script>
<scripttype="text/javascript"language="javascript">
<!--
///动态创建一个div
$(function(){
$("<div/>",{
id:"test",
text:"thisisadiv",
"class":"warpper",
click:function(){
vartext=$(this).text();
alert(text);
}
}).appendTo("body");
});
//创建input:text
$(function(){
$("<input/>",{
type:"text",
val:"inputtextsomethings...",
name:"userName"
}).appendTo("body");
});
//创建inputselect
$(function(){
varslt=$("<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");
});
//creatcheckbox
$(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>

相关文章