JQuery_jquery를 사용하여 DOM 및 양식 요소를 동적으로 생성하기 위한 구현 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JQuery_jquery를 사용하여 DOM 및 양식 요소를 동적으로 생성하기 위한 구현 코드

May 16, 2016 pm 06:03 PM

dom 양식 요소

复代码码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<머리> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>createElement</title> 
<style type="text/css"> 
.warpper{ border:1px 단색 빨간색; 패딩:8px;} 
</style> 
<script type="text/javascript" 언어="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script> 
<script type="text/javascript" 언어="javascript"> 
<!-- 
///动态创建一个div 
$(function(){ 
$('<div />',{ 
id:'test' , 
text:"이것은 div입니다", 
"class":"warpper", 
click:function(){ 
var text=$(this).text() 
경고(텍스트); 
} 
}).appendTo("body") 
}); 
//创建input:text 
$(function(){ 
$('<input />',{ 
type:"text", 
val:"input text 뭔가...", 
name:"userName" 
}).appendTo("body"); 
}); 
//创建input select 
$(function(){ 
var slt=$('<select />',{name:"country" }); 
$('&lt ;option />',{ 
val:"0", 
text:"请选择" 
}).appendTo(slt) 
$('<option>',{ 
값:"CN", 
텍스트:"중국", 
선택됨:"선택됨" 
}).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" ) 
}); 
//체크박스 생성 
$(function(){ 
$('<input />',{ 
type:"checkbox", 
name:"cbox", 
val:"1", 
checked:"checked" 
}).appendTo("body") 
}); 
$(function(){ 
$('<input />',{ 
type:"file", 
name:"myfile" 
}).appendTo(" 본문"); 
}); 
//--> 
</script> 
</head> 
<본문> 
<양식> 
</body> 
</html> 