您的位置：首页 > Web前端 > JQuery

JQuery动态创建DOM对象、表单元素

2017-12-07 22:44 525 查看
<!--

<!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_x</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>-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航